diff --git a/apps/backend/prisma/migrations/20260415000000_add_welcome_onboarding_status/migration.sql b/apps/backend/prisma/migrations/20260415000000_add_welcome_onboarding_status/migration.sql
new file mode 100644
index 0000000000..03e62a592a
--- /dev/null
+++ b/apps/backend/prisma/migrations/20260415000000_add_welcome_onboarding_status/migration.sql
@@ -0,0 +1,18 @@
+-- Add 'welcome' to the allowed onboarding status values.
+-- Drop the old constraint and add a new one (NOT VALID for speed),
+-- then validate in the next migration.
+ALTER TABLE "Project"
+  DROP CONSTRAINT "Project_onboardingStatus_valid",
+  ADD CONSTRAINT "Project_onboardingStatus_valid"
+    CHECK (
+      "onboardingStatus" IN (
+        'config_choice',
+        'apps_selection',
+        'auth_setup',
+        'domain_setup',
+        'email_theme_setup',
+        'payments_setup',
+        'welcome',
+        'completed'
+      )
+    ) NOT VALID;
diff --git a/apps/backend/prisma/migrations/20260415000000_add_welcome_onboarding_status/tests/welcome-status-allowed.ts b/apps/backend/prisma/migrations/20260415000000_add_welcome_onboarding_status/tests/welcome-status-allowed.ts
new file mode 100644
index 0000000000..8ea986447d
--- /dev/null
+++ b/apps/backend/prisma/migrations/20260415000000_add_welcome_onboarding_status/tests/welcome-status-allowed.ts
@@ -0,0 +1,70 @@
+import { randomUUID } from "crypto";
+import type { Sql } from "postgres";
+import { expect } from "vitest";
+
+export const preMigration = async (sql: Sql) => {
+  const projectId = `test-${randomUUID()}`;
+  await sql`
+    INSERT INTO "Project" (
+      "id", "createdAt", "updatedAt", "displayName", "description",
+      "isProductionMode", "onboardingStatus"
+    )
+    VALUES (${projectId}, NOW(), NOW(), 'Welcome Test', '', false, 'completed')
+  `;
+
+  await expect(sql`
+    UPDATE "Project"
+    SET "onboardingStatus" = 'welcome'
+    WHERE "id" = ${projectId}
+  `).rejects.toThrow(/Project_onboardingStatus_valid/);
+
+  return { projectId };
+};
+
+export const postMigration = async (sql: Sql, ctx: Awaited<ReturnType<typeof preMigration>>) => {
+  await sql`
+    UPDATE "Project"
+    SET "onboardingStatus" = 'welcome'
+    WHERE "id" = ${ctx.projectId}
+  `;
+
+  const rows = await sql`
+    SELECT "onboardingStatus"
+    FROM "Project"
+    WHERE "id" = ${ctx.projectId}
+  `;
+  expect(rows).toHaveLength(1);
+  expect(rows[0].onboardingStatus).toBe("welcome");
+
+  const insertWelcomeProjectId = `test-${randomUUID()}`;
+  await sql`
+    INSERT INTO "Project" (
+      "id", "createdAt", "updatedAt", "displayName", "description",
+      "isProductionMode", "onboardingStatus"
+    )
+    VALUES (${insertWelcomeProjectId}, NOW(), NOW(), 'Welcome Insert Test', '', false, 'welcome')
+  `;
+
+  const insertedRows = await sql`
+    SELECT "onboardingStatus"
+    FROM "Project"
+    WHERE "id" = ${insertWelcomeProjectId}
+  `;
+  expect(insertedRows).toHaveLength(1);
+  expect(insertedRows[0].onboardingStatus).toBe("welcome");
+
+  const insertInvalidProjectId = `test-${randomUUID()}`;
+  await expect(sql`
+    INSERT INTO "Project" (
+      "id", "createdAt", "updatedAt", "displayName", "description",
+      "isProductionMode", "onboardingStatus"
+    )
+    VALUES (${insertInvalidProjectId}, NOW(), NOW(), 'Invalid Status Insert', '', false, 'invalid_status')
+  `).rejects.toThrow(/Project_onboardingStatus_valid/);
+
+  await expect(sql`
+    UPDATE "Project"
+    SET "onboardingStatus" = 'invalid_status'
+    WHERE "id" = ${ctx.projectId}
+  `).rejects.toThrow(/Project_onboardingStatus_valid/);
+};
diff --git a/apps/backend/prisma/migrations/20260415000001_validate_welcome_onboarding_status/migration.sql b/apps/backend/prisma/migrations/20260415000001_validate_welcome_onboarding_status/migration.sql
new file mode 100644
index 0000000000..4454dcd782
--- /dev/null
+++ b/apps/backend/prisma/migrations/20260415000001_validate_welcome_onboarding_status/migration.sql
@@ -0,0 +1,2 @@
+ALTER TABLE "Project"
+VALIDATE CONSTRAINT "Project_onboardingStatus_valid";
diff --git a/apps/backend/prisma/migrations/20260415000001_validate_welcome_onboarding_status/tests/constraint-is-validated.ts b/apps/backend/prisma/migrations/20260415000001_validate_welcome_onboarding_status/tests/constraint-is-validated.ts
new file mode 100644
index 0000000000..980aae1ed5
--- /dev/null
+++ b/apps/backend/prisma/migrations/20260415000001_validate_welcome_onboarding_status/tests/constraint-is-validated.ts
@@ -0,0 +1,12 @@
+import type { Sql } from "postgres";
+import { expect } from "vitest";
+
+export const postMigration = async (sql: Sql) => {
+  const rows = await sql`
+    SELECT convalidated
+    FROM pg_constraint
+    WHERE conname = 'Project_onboardingStatus_valid'
+  `;
+  expect(rows).toHaveLength(1);
+  expect(rows[0].convalidated).toBe(true);
+};
diff --git a/apps/backend/src/app/api/latest/internal/config/override/[level]/route.tsx b/apps/backend/src/app/api/latest/internal/config/override/[level]/route.tsx
index e5aeb82f21..85de6a3cce 100644
--- a/apps/backend/src/app/api/latest/internal/config/override/[level]/route.tsx
+++ b/apps/backend/src/app/api/latest/internal/config/override/[level]/route.tsx
@@ -17,13 +17,19 @@ import { LOCAL_EMULATOR_ENV_CONFIG_BLOCKED_MESSAGE, isLocalEmulatorProject } fro
 import { globalPrismaClient, rawQuery } from "@/prisma-client";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
 import { branchConfigSchema, environmentConfigSchema, getConfigOverrideErrors, migrateConfigOverride, projectConfigSchema } from "@stackframe/stack-shared/dist/config/schema";
-import { adaptSchema, adminAuthTypeSchema, branchConfigSourceSchema, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { adaptSchema, branchConfigSourceSchema, serverOrHigherAuthTypeSchema, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
 import { StackAssertionError, StatusError, captureError } from "@stackframe/stack-shared/dist/utils/errors";
 import * as yup from "yup";
 type BranchConfigSourceApi = yup.InferType<typeof branchConfigSourceSchema>;
 
 const levelSchema = yupString().oneOf(["project", "branch", "environment"]).defined();
 
+function assertServerAccessAllowed(accessType: "server" | "admin", level: yup.InferType<typeof levelSchema>) {
+  if (accessType === "server" && level !== "branch") {
+    throw new StatusError(StatusError.Forbidden, "Server access can only manage branch config overrides.");
+  }
+}
+
 function shouldEnqueueExternalDbSync(config: unknown): boolean {
   if (!config || typeof config !== "object") return false;
   const configRecord = config as Record<string, unknown>;
@@ -124,7 +130,7 @@ export const GET = createSmartRouteHandler({
   },
   request: yupObject({
     auth: yupObject({
-      type: adminAuthTypeSchema,
+      type: serverOrHigherAuthTypeSchema,
       tenancy: adaptSchema,
     }).defined(),
     params: yupObject({
@@ -139,6 +145,8 @@ export const GET = createSmartRouteHandler({
     }).defined(),
   }),
   handler: async (req) => {
+    assertServerAccessAllowed(req.auth.type, req.params.level);
+
     const levelConfig = levelConfigs[req.params.level];
     const config = await levelConfig.get({
       projectId: req.auth.tenancy.project.id,
@@ -207,7 +215,7 @@ export const PUT = createSmartRouteHandler({
   },
   request: yupObject({
     auth: yupObject({
-      type: adminAuthTypeSchema,
+      type: serverOrHigherAuthTypeSchema,
       tenancy: adaptSchema,
     }).defined(),
     params: yupObject({
@@ -221,6 +229,8 @@ export const PUT = createSmartRouteHandler({
   }),
   response: writeResponseSchema,
   handler: async (req) => {
+    assertServerAccessAllowed(req.auth.type, req.params.level);
+
     if (req.params.level === "environment" && await isLocalEmulatorProject(req.auth.tenancy.project.id)) {
       throw new StatusError(StatusError.BadRequest, LOCAL_EMULATOR_ENV_CONFIG_BLOCKED_MESSAGE);
     }
@@ -266,7 +276,7 @@ export const PATCH = createSmartRouteHandler({
   },
   request: yupObject({
     auth: yupObject({
-      type: adminAuthTypeSchema,
+      type: serverOrHigherAuthTypeSchema,
       tenancy: adaptSchema,
     }).defined(),
     params: yupObject({
@@ -278,6 +288,8 @@ export const PATCH = createSmartRouteHandler({
   }),
   response: writeResponseSchema,
   handler: async (req) => {
+    assertServerAccessAllowed(req.auth.type, req.params.level);
+
     if (req.params.level === "environment" && await isLocalEmulatorProject(req.auth.tenancy.project.id)) {
       throw new StatusError(StatusError.BadRequest, LOCAL_EMULATOR_ENV_CONFIG_BLOCKED_MESSAGE);
     }
diff --git a/apps/backend/src/app/api/latest/internal/payments/setup/route.ts b/apps/backend/src/app/api/latest/internal/payments/setup/route.ts
index 41938830f2..7d0159faa5 100644
--- a/apps/backend/src/app/api/latest/internal/payments/setup/route.ts
+++ b/apps/backend/src/app/api/latest/internal/payments/setup/route.ts
@@ -24,14 +24,21 @@ export const POST = createSmartRouteHandler({
   }),
   handler: async ({ auth }) => {
     const stripe = getStackStripe();
+    const dashboardBaseUrl = getEnvVariable("NEXT_PUBLIC_STACK_DASHBOARD_URL");
 
     const project = await globalPrismaClient.project.findUnique({
       where: { id: auth.project.id },
-      select: { stripeAccountId: true },
+      select: { onboardingStatus: true, stripeAccountId: true },
     });
 
     let stripeAccountId = project?.stripeAccountId || null;
-    const returnToUrl = new URL(`/projects/${auth.project.id}/payments`, getEnvVariable("NEXT_PUBLIC_STACK_DASHBOARD_URL")).toString();
+    const returnToUrl = project?.onboardingStatus === "payments_setup"
+      ? (() => {
+        const onboardingUrl = new URL("/new-project", dashboardBaseUrl);
+          onboardingUrl.searchParams.set("project_id", auth.project.id);
+          return onboardingUrl.toString();
+      })()
+      : new URL(`/projects/${encodeURIComponent(auth.project.id)}/payments`, dashboardBaseUrl).toString();
 
     if (!stripeAccountId) {
       const account = await stripe.accounts.create({
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index bbf812657a..19bf24047a 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -83,6 +83,7 @@
     "geist": "^1",
     "input-otp": "^1.4.1",
     "jose": "^6.1.3",
+    "libsodium-wrappers": "^0.8.2",
     "lodash": "^4.17.21",
     "next": "16.1.7",
     "next-themes": "^0.2.1",
diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/components.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/components.tsx
new file mode 100644
index 0000000000..9555ee94a7
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/components.tsx
@@ -0,0 +1,556 @@
+"use client";
+
+import type { CSSProperties, ReactNode } from "react";
+
+import { AppIcon } from "@/components/app-square";
+import { DesignAlert } from "@/components/design-components/alert";
+import { DesignBadge } from "@/components/design-components/badge";
+import { DesignButton } from "@/components/design-components/button";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Spinner,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  Typography,
+  cn,
+} from "@/components/ui";
+import { CheckCircleIcon, WarningCircleIcon } from "@phosphor-icons/react";
+import { AdminOwnedProject } from "@stackframe/stack";
+import { ALL_APPS, type AppId } from "@stackframe/stack-shared/dist/apps/apps-config";
+import { previewTemplateSource } from "@stackframe/stack-shared/dist/helpers/emails";
+
+import type { TimelineStep } from "./shared";
+
+export type OnboardingPageProps = {
+  stepKey: string,
+  title: string,
+  subtitle?: string,
+  steps: TimelineStep[],
+  currentStep: TimelineStep["id"],
+  onStepClick?: (step: TimelineStep["id"]) => void,
+  disabled?: boolean,
+  primaryAction: ReactNode,
+  secondaryAction?: ReactNode,
+  wide?: boolean,
+  actionsLayout?: "stacked" | "inline",
+  children: ReactNode,
+};
+
+export function OnboardingPage(props: OnboardingPageProps) {
+  const currentIndex = props.steps.findIndex((step) => step.id === props.currentStep);
+
+  return (
+    <div className="flex w-full flex-grow flex-col items-center justify-center px-4 pb-16 pt-8">
+      <div
+        key={props.stepKey}
+        className={cn(
+          "flex w-full flex-col items-center gap-8",
+          props.wide ? "max-w-5xl" : "max-w-[560px]",
+        )}
+      >
+        <div className="onboarding-cascade space-y-2 text-center" style={{ "--cascade-i": 0 } as CSSProperties}>
+          <Typography className="text-3xl font-semibold tracking-tight">
+            {props.title}
+          </Typography>
+          {props.subtitle != null && (
+            <Typography variant="secondary" className="mx-auto max-w-md text-sm leading-relaxed">
+              {props.subtitle}
+            </Typography>
+          )}
+        </div>
+
+        <div className="onboarding-cascade w-full" style={{ "--cascade-i": 1 } as CSSProperties}>
+          {props.children}
+        </div>
+
+        <div className="onboarding-cascade" style={{ "--cascade-i": 2 } as CSSProperties}>
+          {props.actionsLayout === "inline" ? (
+            <div className="flex items-center gap-3">
+              {props.primaryAction}
+              {props.secondaryAction != null && props.secondaryAction}
+            </div>
+          ) : (
+            <div className="flex w-full max-w-[280px] flex-col items-center gap-3">
+              {props.primaryAction}
+              {props.secondaryAction != null && (
+                <div className="flex justify-center">
+                  {props.secondaryAction}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="onboarding-cascade fixed bottom-6 left-0 right-0 z-50 flex justify-center" style={{ "--cascade-i": 3 } as CSSProperties}>
+        <div className="flex items-center gap-[5px]">
+          {props.steps.map((step, index) => {
+            const isComplete = index < currentIndex;
+            const isCurrent = index === currentIndex;
+            const isClickable = isComplete && !props.disabled && props.onStepClick != null;
+
+            return (
+              <button
+                key={step.id}
+                type="button"
+                disabled={!isClickable}
+                onClick={() => { if (isClickable) props.onStepClick?.(step.id); }}
+                aria-label={isClickable ? `Go to step: ${step.label}` : step.label}
+                aria-current={isCurrent ? "step" : undefined}
+                className={cn(
+                  "rounded-full transition-colors duration-300 hover:transition-none",
+                  isCurrent
+                    ? "h-[6px] w-5 bg-foreground"
+                    : isComplete
+                      ? "h-[6px] w-[6px] cursor-pointer bg-foreground/40 hover:bg-foreground/60"
+                      : "h-[6px] w-[6px] cursor-default bg-foreground/20",
+                )}
+                title={step.label}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function appStageBadgeColor(stage: (typeof ALL_APPS)[AppId]["stage"]) {
+  if (stage === "alpha") {
+    return "orange";
+  }
+  if (stage === "beta") {
+    return "blue";
+  }
+  return null;
+}
+
+export type OnboardingAppCardProps = {
+  appId: AppId,
+  selected: boolean,
+  required: boolean,
+  primary: boolean,
+  disabled?: boolean,
+  onToggle: () => void,
+};
+
+export function OnboardingAppCard(props: OnboardingAppCardProps) {
+  const app = ALL_APPS[props.appId];
+  const stageBadgeColor = appStageBadgeColor(app.stage);
+
+  return (
+    <Tooltip delayDuration={0}>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={props.required ? undefined : props.onToggle}
+          disabled={props.disabled}
+          aria-disabled={props.required ? true : undefined}
+          tabIndex={props.required ? -1 : undefined}
+          className={cn(
+            "group flex flex-col items-center gap-1.5 rounded-xl p-1 transition-opacity duration-150 hover:transition-none",
+            props.primary ? "w-[100px]" : "w-[90px]",
+            props.required ? "cursor-default opacity-100" : props.selected ? "opacity-100" : "opacity-70 hover:opacity-100",
+            props.disabled && "pointer-events-none opacity-40",
+            !props.required && "active:scale-[0.97]",
+          )}
+        >
+          <div className="relative">
+            <AppIcon appId={props.appId} enabled={props.selected} className={props.primary ? "w-20 h-20" : "w-16 h-16"} />
+            {props.selected && (
+              <div className="absolute -right-1 -top-1 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-emerald-600 text-white shadow-sm">
+                <CheckCircleIcon className="h-4 w-4" weight="fill" />
+              </div>
+            )}
+          </div>
+          <Typography className={cn(
+            "text-center leading-tight",
+            props.primary ? "text-sm font-semibold" : "text-[11px] font-medium",
+          )}>
+            {app.displayName}
+          </Typography>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent
+        side="top"
+        className="z-50 max-w-[240px] rounded-xl border-0 bg-white p-3 shadow-lg ring-1 ring-black/[0.06] dark:bg-background dark:ring-white/[0.06]"
+      >
+        <div className="space-y-1">
+          <div className="flex items-center gap-2">
+            <Typography className="text-sm font-semibold text-foreground">{app.displayName}</Typography>
+            {props.required && (
+              <DesignBadge label="Required" color="orange" size="sm" />
+            )}
+            {!props.required && stageBadgeColor != null && (
+              <DesignBadge
+                label={app.stage === "alpha" ? "Alpha" : "Beta"}
+                color={stageBadgeColor}
+                size="sm"
+              />
+            )}
+          </div>
+          <Typography className="text-xs leading-relaxed text-muted-foreground">
+            {app.subtitle}
+          </Typography>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+export type DomainSetupTransitionStateProps = {
+  advancing: boolean,
+  errorMessage: string | null,
+  onRetry: () => void,
+  onOpenProject: () => void,
+};
+
+export function DomainSetupTransitionState(props: DomainSetupTransitionStateProps) {
+  if (props.errorMessage == null) {
+    return (
+      <div className="flex w-full min-h-[320px] items-center justify-center">
+        <Spinner size={24} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto flex w-full max-w-xl flex-col items-center justify-center px-4 py-10">
+      <Card className="w-full">
+        <CardHeader>
+          <CardTitle>We couldn&apos;t continue onboarding</CardTitle>
+          <CardDescription>
+            Retry the automatic transition to email setup, or open the project and continue from there.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Alert>
+            <WarningCircleIcon className="h-4 w-4" />
+            <AlertTitle>Domain setup transition failed</AlertTitle>
+            <AlertDescription>{props.errorMessage}</AlertDescription>
+          </Alert>
+          <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+            <Button variant="outline" onClick={props.onOpenProject}>
+              Open Project
+            </Button>
+            <Button onClick={props.onRetry} disabled={props.advancing}>
+              {props.advancing ? "Retrying..." : "Retry"}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export function OnboardingEmailThemePreview(props: {
+  adminApp: AdminOwnedProject["app"],
+  themeId: string,
+}) {
+  const previewHtml = props.adminApp.useEmailPreview({
+    themeId: props.themeId,
+    templateTsxSource: previewTemplateSource,
+  });
+
+  return (
+    <iframe
+      srcDoc={previewHtml}
+      sandbox=""
+      className="pointer-events-none h-full w-full border-0"
+      title="Email theme preview"
+    />
+  );
+}
+
+function WelcomeIllustration() {
+  return (
+    <div className="relative h-[280px] w-full sm:h-[320px] md:h-[360px] overflow-hidden">
+      {/* Central shield — authentication */}
+      <div className={cn(
+        "absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2",
+        "w-20 h-24 md:w-28 md:h-32 lg:w-32 lg:h-36",
+        "rounded-2xl",
+        "bg-gradient-to-br from-blue-500/20 via-indigo-500/15 to-violet-500/20",
+        "backdrop-blur-xl",
+        "ring-1 ring-white/20 dark:ring-white/10",
+        "shadow-[0_0_60px_rgba(99,102,241,0.2)]",
+        "flex flex-col items-center justify-center gap-1.5 md:gap-2",
+      )}>
+        <div className="w-7 h-7 md:w-9 md:h-9 lg:w-10 lg:h-10 rounded-full bg-gradient-to-br from-blue-400/40 to-indigo-500/30 ring-1 ring-blue-400/20 flex items-center justify-center">
+          <div className="w-3 h-3.5 md:w-4 md:h-4.5 border-2 border-blue-400/60 rounded-sm" />
+        </div>
+        <div className="space-y-1">
+          <div className="h-1 md:h-1.5 bg-white/15 rounded-full w-12 md:w-16 mx-auto" />
+          <div className="h-1 md:h-1.5 bg-white/10 rounded-full w-8 md:w-10 mx-auto" />
+        </div>
+      </div>
+
+      {/* Envelope — emails, top left */}
+      <div className={cn(
+        "absolute z-20",
+        "top-[15%] left-[12%] md:left-[18%] lg:left-[22%]",
+        "w-14 h-10 md:w-20 md:h-14 lg:w-24 lg:h-16",
+        "rounded-xl",
+        "bg-gradient-to-br from-emerald-500/18 to-teal-500/12",
+        "ring-1 ring-emerald-500/20",
+        "shadow-[0_0_24px_rgba(16,185,129,0.15)]",
+        "rotate-[-8deg]",
+        "flex items-center justify-center overflow-hidden",
+      )}>
+        <div className="relative w-full h-full">
+          <div className="absolute inset-x-0 top-0 h-[45%] bg-gradient-to-b from-emerald-400/15 to-transparent" style={{ clipPath: "polygon(0 0, 50% 80%, 100% 0)" }} />
+          <div className="absolute bottom-1.5 left-1.5 right-1.5 space-y-0.5 md:space-y-1 md:bottom-2 md:left-2.5 md:right-2.5">
+            <div className="h-0.5 md:h-1 bg-emerald-500/15 rounded-full w-3/4" />
+            <div className="h-0.5 md:h-1 bg-emerald-500/10 rounded-full w-1/2" />
+          </div>
+        </div>
+      </div>
+
+      {/* Credit card — payments, bottom right */}
+      <div className={cn(
+        "absolute z-20",
+        "bottom-[18%] right-[10%] md:right-[16%] lg:right-[20%]",
+        "w-16 h-10 md:w-24 md:h-14 lg:w-28 lg:h-16",
+        "rounded-xl",
+        "bg-gradient-to-br from-violet-500/18 to-purple-500/12",
+        "ring-1 ring-violet-500/20",
+        "shadow-[0_0_24px_rgba(139,92,246,0.15)]",
+        "rotate-[6deg]",
+        "flex flex-col justify-between p-2 md:p-3",
+      )}>
+        <div className="flex justify-between items-start">
+          <div className="w-4 h-3 md:w-6 md:h-4 rounded-sm bg-gradient-to-br from-amber-400/50 to-amber-600/30 ring-1 ring-amber-500/20" />
+          <div className="flex gap-0.5">
+            <div className="w-2.5 h-2.5 md:w-3 md:h-3 rounded-full bg-violet-400/30 -mr-1" />
+            <div className="w-2.5 h-2.5 md:w-3 md:h-3 rounded-full bg-purple-400/30" />
+          </div>
+        </div>
+        <div className="h-0.5 md:h-1 bg-white/10 rounded-full w-2/3" />
+      </div>
+
+      {/* Bar chart — analytics, top right */}
+      <div className={cn(
+        "absolute z-10",
+        "top-[20%] right-[14%] md:right-[20%] lg:right-[24%]",
+        "w-12 h-12 md:w-16 md:h-16 lg:w-20 lg:h-20",
+        "rounded-xl",
+        "bg-gradient-to-br from-cyan-500/15 to-blue-500/10",
+        "ring-1 ring-cyan-500/20",
+        "shadow-[0_0_20px_rgba(6,182,212,0.12)]",
+        "rotate-[5deg]",
+        "flex items-end justify-center gap-0.5 md:gap-1 p-2 md:p-2.5 lg:p-3",
+      )}>
+        <div className="w-1.5 md:w-2 h-[30%] bg-cyan-400/40 rounded-full" />
+        <div className="w-1.5 md:w-2 h-[55%] bg-cyan-400/50 rounded-full" />
+        <div className="w-1.5 md:w-2 h-[80%] bg-cyan-400/60 rounded-full" />
+        <div className="w-1.5 md:w-2 h-[45%] bg-cyan-400/40 rounded-full" />
+      </div>
+
+      {/* People — teams, bottom left */}
+      <div className={cn(
+        "absolute z-10",
+        "bottom-[20%] left-[12%] md:left-[18%] lg:left-[22%]",
+        "w-14 h-11 md:w-20 md:h-14 lg:w-24 lg:h-16",
+        "rounded-xl",
+        "bg-gradient-to-br from-amber-500/15 to-orange-500/10",
+        "ring-1 ring-amber-500/18",
+        "shadow-[0_0_20px_rgba(245,158,11,0.12)]",
+        "rotate-[-4deg]",
+        "flex items-center justify-center gap-1 md:gap-1.5",
+      )}>
+        <div className="flex flex-col items-center">
+          <div className="w-2.5 h-2.5 md:w-3.5 md:h-3.5 rounded-full bg-amber-400/40" />
+          <div className="w-4 h-2 md:w-5 md:h-2.5 rounded-t-full bg-amber-400/25 mt-0.5" />
+        </div>
+        <div className="flex flex-col items-center -ml-0.5">
+          <div className="w-2.5 h-2.5 md:w-3.5 md:h-3.5 rounded-full bg-orange-400/40" />
+          <div className="w-4 h-2 md:w-5 md:h-2.5 rounded-t-full bg-orange-400/25 mt-0.5" />
+        </div>
+        <div className="flex flex-col items-center -ml-0.5">
+          <div className="w-2.5 h-2.5 md:w-3.5 md:h-3.5 rounded-full bg-amber-400/30" />
+          <div className="w-4 h-2 md:w-5 md:h-2.5 rounded-t-full bg-amber-400/20 mt-0.5" />
+        </div>
+      </div>
+
+      {/* Key — API keys, floating small */}
+      <div className={cn(
+        "absolute z-20",
+        "top-[40%] right-[6%] md:right-[10%] lg:right-[14%]",
+        "w-8 h-8 md:w-11 md:h-11 lg:w-14 lg:h-14",
+        "rounded-lg md:rounded-xl",
+        "bg-gradient-to-br from-rose-500/15 to-pink-500/10",
+        "ring-1 ring-rose-500/18",
+        "shadow-[0_0_16px_rgba(244,63,94,0.1)]",
+        "rotate-[15deg]",
+        "flex items-center justify-center",
+      )}>
+        <div className="w-3 h-3 md:w-4 md:h-4 lg:w-5 lg:h-5 rounded-full border-2 border-rose-400/40 relative">
+          <div className="absolute left-full top-1/2 -translate-y-1/2 w-1.5 md:w-2 lg:w-2.5 h-0.5 bg-rose-400/30 rounded-full" />
+        </div>
+      </div>
+
+      {/* Webhook/automation icon — left mid */}
+      <div className={cn(
+        "absolute z-10 hidden md:flex",
+        "top-[48%] left-[6%] lg:left-[12%]",
+        "w-10 h-10 lg:w-14 lg:h-14",
+        "rounded-xl",
+        "bg-gradient-to-br from-sky-500/12 to-indigo-500/8",
+        "ring-1 ring-sky-500/15",
+        "rotate-[-12deg]",
+        "items-center justify-center",
+        "opacity-60",
+      )}>
+        <div className="flex flex-col gap-0.5 lg:gap-1">
+          <div className="h-0.5 lg:h-1 w-4 lg:w-6 bg-sky-400/30 rounded-full" />
+          <div className="h-0.5 lg:h-1 w-3 lg:w-4 bg-sky-400/20 rounded-full" />
+        </div>
+      </div>
+
+      {/* Decorative ring — top center */}
+      <div className={cn(
+        "absolute",
+        "top-[6%] left-[42%] md:left-[44%]",
+        "w-6 h-6 md:w-8 md:h-8 rounded-full",
+        "ring-1 ring-blue-500/15",
+        "opacity-40",
+      )} />
+
+      {/* Decorative dot — bottom center right */}
+      <div className={cn(
+        "absolute",
+        "bottom-[10%] right-[35%] md:right-[38%]",
+        "w-2.5 h-2.5 md:w-3 md:h-3 rounded-full",
+        "bg-indigo-500/15",
+        "ring-1 ring-indigo-500/10",
+      )} />
+
+      {/* Decorative dot — top left */}
+      <div className={cn(
+        "absolute hidden lg:block",
+        "top-[10%] left-[8%]",
+        "w-2 h-2 rounded-full",
+        "bg-emerald-500/15",
+      )} />
+
+      {/* Decorative ring — bottom right */}
+      <div className={cn(
+        "absolute hidden md:block",
+        "bottom-[8%] right-[8%] lg:right-[12%]",
+        "w-5 h-5 lg:w-7 lg:h-7 rounded-full",
+        "ring-1 ring-purple-500/12",
+        "opacity-30",
+      )} />
+
+      {/* Decorative dot — right edge */}
+      <div className={cn(
+        "absolute hidden lg:block",
+        "top-[60%] right-[6%]",
+        "w-1.5 h-1.5 rounded-full",
+        "bg-rose-400/20",
+      )} />
+
+      {/* Soft radial glow behind the center */}
+      <div
+        className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 md:w-80 md:h-80 rounded-full pointer-events-none"
+        style={{ background: "radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 70%)" }}
+      />
+    </div>
+  );
+}
+
+export type WelcomeSlideProps = {
+  steps: TimelineStep[],
+  saving: boolean,
+  enabledApps: Record<string, { enabled?: boolean } | undefined>,
+  onFinish: () => void,
+};
+
+export function WelcomeSlide(props: WelcomeSlideProps) {
+  const currentIndex = props.steps.findIndex((step) => step.id === "welcome");
+
+  return (
+    <div className="flex w-full flex-grow flex-col items-center justify-center px-4 pb-16 pt-8">
+      <div
+        key="welcome"
+        className="flex w-full max-w-xl flex-col items-center"
+      >
+        <div className="onboarding-cascade w-full" style={{ "--cascade-i": 0 } as CSSProperties}>
+          <WelcomeIllustration />
+        </div>
+
+        <div className="onboarding-cascade flex flex-col items-center gap-3 text-center" style={{ "--cascade-i": 1 } as CSSProperties}>
+          <Typography className="text-3xl font-semibold tracking-tight sm:text-4xl">
+            Welcome to Stack Auth
+          </Typography>
+          <Typography variant="secondary" className="mx-auto max-w-sm text-sm leading-relaxed text-balance">
+            Your project is ready. Start building with authentication, emails, payments, and more — all in one place.
+          </Typography>
+        </div>
+
+        <div className="onboarding-cascade mt-8" style={{ "--cascade-i": 2 } as CSSProperties}>
+          <DesignButton
+            className="min-w-[200px] rounded-full"
+            loading={props.saving}
+            onClick={props.onFinish}
+          >
+            Get Started
+          </DesignButton>
+        </div>
+      </div>
+
+      <div className="onboarding-cascade fixed bottom-6 left-0 right-0 z-50 flex justify-center" style={{ "--cascade-i": 3 } as CSSProperties}>
+        <div className="flex items-center gap-[5px]">
+          {props.steps.map((step, index) => {
+            const isComplete = index < currentIndex;
+            const isCurrent = index === currentIndex;
+
+            return (
+              <div
+                key={step.id}
+                aria-label={step.label}
+                aria-current={isCurrent ? "step" : undefined}
+                className={cn(
+                  "rounded-full",
+                  isCurrent
+                    ? "h-[6px] w-5 bg-foreground"
+                    : isComplete
+                      ? "h-[6px] w-[6px] bg-foreground/40"
+                      : "h-[6px] w-[6px] bg-foreground/20",
+                )}
+                title={step.label}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ModeNotImplementedCard(props: { onBack: () => void }) {
+  return (
+    <div className="mx-auto flex min-h-[260px] w-full max-w-2xl flex-col items-center justify-center gap-6 text-center">
+      <DesignAlert
+        variant="warning"
+        title="Not available yet"
+        description="Linking an existing config into onboarding is not available yet."
+        glassmorphic
+      />
+      <div className="flex justify-center">
+        <DesignButton variant="outline" className="rounded-full px-8" onClick={props.onBack}>
+          Go Back
+        </DesignButton>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/content.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/content.tsx
new file mode 100644
index 0000000000..9f8fb9b2b9
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/content.tsx
@@ -0,0 +1,467 @@
+"use client";
+
+import { DesignButton } from "@/components/design-components/button";
+import { DesignInput } from "@/components/design-components/input";
+import { DesignSelectorDropdown } from "@/components/design-components/select";
+import { useRouter } from "@/components/router";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Label,
+  Spinner,
+  Typography,
+} from "@/components/ui";
+import { getPublicEnvVar } from "@/lib/env";
+import { PlusCircleIcon } from "@phosphor-icons/react";
+import { AdminOwnedProject, useStackApp, useUser } from "@stackframe/stack";
+import { runAsynchronouslyWithAlert, wait } from "@stackframe/stack-shared/dist/utils/promises";
+import { useSearchParams } from "next/navigation";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import type { ProjectOnboardingStatus } from "@stackframe/stack-shared/dist/schema-fields";
+import { ProjectOnboardingWizard } from "./project-onboarding-wizard";
+import {
+  beginPendingAction,
+  endPendingAction,
+  getStackAppInternals,
+  isProjectOnboardingStatus,
+} from "./shared";
+
+export default function PageClient() {
+  const app = useStackApp();
+  const appInternals = useMemo(() => getStackAppInternals(app), [app]);
+  const user = useUser({ or: "redirect", projectIdMustMatch: "internal" });
+  const teams = user.useTeams();
+  const projects = user.useOwnedProjects();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const isLocalEmulator = getPublicEnvVar("NEXT_PUBLIC_STACK_IS_LOCAL_EMULATOR") === "true";
+
+  const selectedProjectId = searchParams.get("project_id");
+  const displayNameFromSearch = searchParams.get("display_name");
+  const redirectToNeonConfirmWith = searchParams.get("redirect_to_neon_confirm_with");
+  const redirectToConfirmWith = searchParams.get("redirect_to_confirm_with");
+  const mode = searchParams.get("mode");
+
+  const [projectStatuses, setProjectStatuses] = useState<Map<string, ProjectOnboardingStatus>>(new Map());
+  const [loadingStatuses, setLoadingStatuses] = useState(true);
+  const [projectName, setProjectName] = useState(displayNameFromSearch ?? "");
+  const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null);
+  const [creatingTeam, setCreatingTeam] = useState(false);
+  const [creatingProject, setCreatingProject] = useState(false);
+  const [isCreateProjectOpen, setIsCreateProjectOpen] = useState(true);
+  const [isCreateTeamOpen, setIsCreateTeamOpen] = useState(false);
+  const [newTeamName, setNewTeamName] = useState("");
+  const creatingTeamRef = useRef(false);
+  const creatingProjectRef = useRef(false);
+
+  useEffect(() => {
+    if (selectedTeamId != null) {
+      return;
+    }
+
+    if (user.selectedTeam != null) {
+      setSelectedTeamId(user.selectedTeam.id);
+      return;
+    }
+
+    const firstTeam = teams.at(0);
+    if (firstTeam !== undefined) {
+      setSelectedTeamId(firstTeam.id);
+    }
+  }, [selectedTeamId, teams, user.selectedTeam]);
+
+  const updateSearchParams = useCallback((updates: Record<string, string | null>) => {
+    const params = new URLSearchParams(searchParams.toString());
+
+    for (const [key, value] of Object.entries(updates)) {
+      if (value == null || value.length === 0) {
+        params.delete(key);
+      } else {
+        params.set(key, value);
+      }
+    }
+
+    const query = params.toString();
+    router.replace(query.length > 0 ? `/new-project?${query}` : "/new-project");
+  }, [router, searchParams]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    runAsynchronouslyWithAlert(async () => {
+      setLoadingStatuses(true);
+      try {
+        const response = await appInternals.sendRequest("/internal/projects", {}, "client");
+        if (!response.ok) {
+          throw new Error(`Failed to load projects: ${response.status} ${await response.text()}`);
+        }
+
+        const body = await response.json();
+        if (body == null || typeof body !== "object" || !("items" in body) || !Array.isArray(body.items)) {
+          throw new Error("Project list endpoint returned an invalid response.");
+        }
+
+        const statusMap = new Map<string, ProjectOnboardingStatus>();
+        for (const item of body.items) {
+          if (item == null || typeof item !== "object" || !("id" in item) || typeof item.id !== "string") {
+            continue;
+          }
+
+          const onboardingStatus = "onboarding_status" in item ? item.onboarding_status : undefined;
+          if (!isProjectOnboardingStatus(onboardingStatus)) {
+            throw new Error(`Project ${item.id} returned an invalid onboarding status.`);
+          }
+          statusMap.set(item.id, onboardingStatus);
+        }
+
+        if (!cancelled) {
+          setProjectStatuses(statusMap);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoadingStatuses(false);
+        }
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [appInternals, projects.length]);
+
+  const selectedProject = useMemo(() => {
+    if (selectedProjectId == null) {
+      return null;
+    }
+    return projects.find((project) => project.id === selectedProjectId) ?? null;
+  }, [projects, selectedProjectId]);
+
+  const selectedProjectStatus = useMemo(() => {
+    if (selectedProjectId == null) {
+      return null;
+    }
+    return projectStatuses.get(selectedProjectId) ?? null;
+  }, [projectStatuses, selectedProjectId]);
+
+  useEffect(() => {
+    if (selectedProject == null || loadingStatuses || selectedProjectStatus !== "completed") {
+      return;
+    }
+
+    router.replace(`/projects/${encodeURIComponent(selectedProject.id)}`);
+  }, [loadingStatuses, router, selectedProject, selectedProjectStatus]);
+
+  const setSelectedProjectStatus = async (project: AdminOwnedProject, status: ProjectOnboardingStatus) => {
+    const projectInternals = getStackAppInternals(project.app);
+
+    const response = await projectInternals.sendRequest(
+      "/internal/projects/current",
+      {
+        method: "PATCH",
+        headers: {
+          "content-type": "application/json",
+        },
+        body: JSON.stringify({ onboarding_status: status }),
+      },
+      "admin",
+    );
+
+    if (!response.ok) {
+      throw new Error(`Failed to update onboarding status: ${response.status} ${await response.text()}`);
+    }
+
+    setProjectStatuses((previous) => {
+      const next = new Map(previous);
+      next.set(project.id, status);
+      return next;
+    });
+
+    await appInternals.refreshOwnedProjects();
+  };
+
+  if (isLocalEmulator) {
+    return (
+      <div className="w-full flex-grow flex items-center justify-center p-4">
+        <div className="max-w-lg w-full rounded-lg border border-border p-6 space-y-4">
+          <Typography type="h2">Project creation is disabled in local emulator mode</Typography>
+          <Typography variant="secondary">
+            Use the <b>Open config file</b> action on the Projects page to open or create projects from a local config file path.
+          </Typography>
+          <div className="flex justify-end">
+            <Button onClick={async () => {
+              router.push("/projects");
+              await wait(2000);
+            }}>
+              Go to Projects
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (loadingStatuses && selectedProjectId != null) {
+    return (
+      <div className="flex w-full flex-grow items-center justify-center">
+        <Spinner size={24} />
+      </div>
+    );
+  }
+
+  if (selectedProjectId != null && selectedProject == null) {
+    return (
+      <div className="w-full flex-grow flex items-center justify-center p-4">
+        <Card className="w-full max-w-xl">
+          <CardHeader>
+            <CardTitle>Project not found</CardTitle>
+            <CardDescription>We could not find the project in your account.</CardDescription>
+          </CardHeader>
+          <CardContent className="flex justify-end">
+            <Button variant="outline" onClick={() => router.push("/projects")}>Go to Projects</Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (selectedProject != null && !loadingStatuses && selectedProjectStatus === "completed") {
+    return (
+      <div className="flex w-full flex-grow items-center justify-center">
+        <Spinner size={24} />
+      </div>
+    );
+  }
+
+  if (selectedProject != null && !loadingStatuses && selectedProjectStatus == null) {
+    throw new Error(`Missing onboarding status for project ${selectedProject.id}.`);
+  }
+
+  if (selectedProject == null) {
+    return (
+      <div className="flex w-full flex-grow items-center justify-center">
+        <Dialog
+          open={isCreateProjectOpen}
+          onOpenChange={(open) => {
+            setIsCreateProjectOpen(open);
+            if (!open) {
+              router.push("/projects");
+            }
+          }}
+        >
+          <DialogContent
+            className="overflow-hidden border-0 bg-white/90 p-0 shadow-2xl backdrop-blur-xl ring-1 ring-black/[0.06] dark:bg-background/75 dark:ring-white/[0.08] sm:max-w-[720px] sm:rounded-3xl"
+            overlayProps={{ className: "bg-black/70 backdrop-blur-[2px]" }}
+            noCloseButton
+          >
+            <DialogHeader className="border-b border-black/[0.08] px-6 py-6 text-left dark:border-white/[0.08]">
+              <div className="flex items-center gap-3">
+                <div className="rounded-2xl bg-blue-500/10 p-2.5 text-blue-600 dark:bg-blue-500/15 dark:text-blue-400">
+                  <PlusCircleIcon className="h-5 w-5" />
+                </div>
+                <div className="space-y-1">
+                  <DialogTitle className="text-xl font-semibold tracking-tight">Create a new project</DialogTitle>
+                </div>
+              </div>
+              <DialogDescription>
+                Start by naming your project and choosing the team that will own it.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-5 px-6 py-6">
+              <div className="space-y-2">
+                <Label htmlFor="project-name">Project name</Label>
+                <DesignInput
+                  id="project-name"
+                  value={projectName}
+                  onChange={(event) => setProjectName(event.target.value)}
+                  placeholder="My Project"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="team-id">Team</Label>
+                <div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto]">
+                  <DesignSelectorDropdown
+                    value={selectedTeamId ?? ""}
+                    onValueChange={setSelectedTeamId}
+                    placeholder="Select a team"
+                    size="md"
+                    className="w-full"
+                    options={teams.map((team) => ({ value: team.id, label: team.displayName }))}
+                  />
+                  <DesignButton variant="outline" onClick={() => setIsCreateTeamOpen(true)} className="rounded-xl sm:min-w-[152px]">
+                    <PlusCircleIcon className="mr-2 h-4 w-4" />
+                    Create Team
+                  </DesignButton>
+                </div>
+              </div>
+            </div>
+
+            <DialogFooter className="border-t border-black/[0.08] px-6 py-4 dark:border-white/[0.08] sm:justify-end sm:space-x-2">
+              <DesignButton variant="outline" className="rounded-xl" onClick={() => router.push("/projects")} disabled={creatingProject}>
+                Cancel
+              </DesignButton>
+              <DesignButton
+                className="rounded-xl"
+                loading={creatingProject}
+                onClick={() => {
+                  if (!beginPendingAction(creatingProjectRef, setCreatingProject)) {
+                    return;
+                  }
+
+                  return runAsynchronouslyWithAlert(async () => {
+                    const trimmedProjectName = projectName.trim();
+                    if (trimmedProjectName.length === 0) {
+                      throw new Error("Project name is required.");
+                    }
+
+                    const firstTeam = teams.at(0);
+                    const teamId = selectedTeamId ?? user.selectedTeam?.id ?? firstTeam?.id;
+                    if (teamId === undefined) {
+                      throw new Error("Select a team before creating the project.");
+                    }
+
+                    try {
+                      const newProject = await user.createProject({
+                        displayName: trimmedProjectName,
+                        teamId,
+                        onboardingStatus: "config_choice",
+                      });
+
+                      setProjectStatuses((previous) => {
+                        const next = new Map(previous);
+                        next.set(newProject.id, "config_choice");
+                        return next;
+                      });
+
+                      if (redirectToNeonConfirmWith != null) {
+                        const confirmSearchParams = new URLSearchParams(redirectToNeonConfirmWith);
+                        confirmSearchParams.set("default_selected_project_id", newProject.id);
+                        router.push(`/integrations/neon/confirm?${confirmSearchParams.toString()}`);
+                        await wait(2000);
+                        return;
+                      }
+
+                      if (redirectToConfirmWith != null) {
+                        const confirmSearchParams = new URLSearchParams(redirectToConfirmWith);
+                        confirmSearchParams.set("default_selected_project_id", newProject.id);
+                        router.push(`/integrations/custom/confirm?${confirmSearchParams.toString()}`);
+                        await wait(2000);
+                        return;
+                      }
+
+                      updateSearchParams({
+                        project_id: newProject.id,
+                        mode: null,
+                      });
+                    } finally {
+                      endPendingAction(creatingProjectRef, setCreatingProject);
+                    }
+                  });
+                }}
+              >
+                Create Project
+              </DesignButton>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        <Dialog open={isCreateTeamOpen} onOpenChange={setIsCreateTeamOpen}>
+          <DialogContent
+            className="overflow-hidden border-0 bg-white/90 p-0 shadow-2xl backdrop-blur-xl ring-1 ring-black/[0.06] dark:bg-background/75 dark:ring-white/[0.08] sm:max-w-[640px] sm:rounded-3xl"
+            overlayProps={{ className: "bg-black/70 backdrop-blur-[2px]" }}
+            noCloseButton
+          >
+            <DialogHeader className="px-6 pb-0 pt-6 text-left">
+              <div className="flex items-center gap-3">
+                <div className="rounded-2xl bg-blue-500/10 p-2.5 text-blue-600 dark:bg-blue-500/15 dark:text-blue-400">
+                  <PlusCircleIcon className="h-5 w-5" />
+                </div>
+                <div className="space-y-1">
+                  <DialogTitle className="text-xl font-semibold tracking-tight">Create Team</DialogTitle>
+                </div>
+              </div>
+              <DialogDescription>
+                This team will be available immediately for project ownership.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-5 px-6 py-6">
+              <div className="space-y-2">
+                <Label htmlFor="new-team-name">Team name</Label>
+                <DesignInput
+                  id="new-team-name"
+                  value={newTeamName}
+                  onChange={(event) => setNewTeamName(event.target.value)}
+                  placeholder="Acme Team"
+                />
+              </div>
+            </div>
+
+            <DialogFooter className="px-6 pb-6 pt-0 sm:justify-end sm:space-x-2">
+              <DesignButton variant="outline" className="rounded-xl" onClick={() => setIsCreateTeamOpen(false)} disabled={creatingTeam}>
+                Cancel
+              </DesignButton>
+              <DesignButton
+                className="rounded-xl"
+                loading={creatingTeam}
+                onClick={() => {
+                  if (!beginPendingAction(creatingTeamRef, setCreatingTeam)) {
+                    return;
+                  }
+
+                  return runAsynchronouslyWithAlert(async () => {
+                    const trimmedTeamName = newTeamName.trim();
+                    if (trimmedTeamName.length === 0) {
+                      throw new Error("Team name is required.");
+                    }
+
+                    try {
+                      const createdTeam = await user.createTeam({
+                        displayName: trimmedTeamName,
+                      });
+                      await user.setSelectedTeam(createdTeam.id);
+                      setSelectedTeamId(createdTeam.id);
+                      setNewTeamName("");
+                      setIsCreateTeamOpen(false);
+                    } finally {
+                      endPendingAction(creatingTeamRef, setCreatingTeam);
+                    }
+                  });
+                }}
+              >
+                Create Team
+              </DesignButton>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-full flex-grow justify-center">
+      <ProjectOnboardingWizard
+        project={selectedProject}
+        status={selectedProjectStatus ?? "config_choice"}
+        mode={mode}
+        setMode={(nextMode) => updateSearchParams({ mode: nextMode })}
+        setStatus={(nextStatus) => setSelectedProjectStatus(selectedProject, nextStatus)}
+        onComplete={() => {
+          router.push(`/projects/${encodeURIComponent(selectedProject.id)}`);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/link-existing-onboarding-workflow.test.ts b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/link-existing-onboarding-workflow.test.ts
new file mode 100644
index 0000000000..df6b55659e
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/link-existing-onboarding-workflow.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  buildWorkflowYaml,
+  GITHUB_PROJECT_ID_SECRET_NAME,
+  GITHUB_SECRET_SERVER_KEY_SECRET_NAME,
+  WORKFLOW_FILE_PATH,
+} from "./link-existing-onboarding-workflow";
+
+describe("buildWorkflowYaml", () => {
+  it("encodes branch and config path scalars and uses env indirection in run command", () => {
+    const branch = "main\"\n      - injected";
+    const configPath = "stack.config.ts\"\n        run: echo hacked";
+    const workflowYaml = buildWorkflowYaml(branch, configPath);
+
+    expect(workflowYaml).toContain(`      - ${JSON.stringify(branch)}`);
+    expect(workflowYaml).toContain(`      - ${JSON.stringify(configPath)}`);
+    expect(workflowYaml).toContain(`      - ${JSON.stringify(WORKFLOW_FILE_PATH)}`);
+    expect(workflowYaml).toContain(`          STACK_AUTH_CONFIG_PATH: ${JSON.stringify(configPath)}`);
+    expect(workflowYaml).toContain("run: pnpx @stackframe/stack-cli@latest config push --config-file \"$STACK_AUTH_CONFIG_PATH\"");
+    expect(workflowYaml).not.toContain(`--config-file "${configPath}"`);
+  });
+
+  it("keeps GitHub secret placeholders intact", () => {
+    const workflowYaml = buildWorkflowYaml("main", "./stack.config.ts");
+
+    expect(workflowYaml).toContain(`\${{ secrets.${GITHUB_PROJECT_ID_SECRET_NAME} }}`);
+    expect(workflowYaml).toContain(`\${{ secrets.${GITHUB_SECRET_SERVER_KEY_SECRET_NAME} }}`);
+  });
+});
diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/link-existing-onboarding-workflow.ts b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/link-existing-onboarding-workflow.ts
new file mode 100644
index 0000000000..7ff3312816
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/link-existing-onboarding-workflow.ts
@@ -0,0 +1,41 @@
+export const WORKFLOW_FILE_NAME = "stack-auth-config-sync.yml";
+export const WORKFLOW_FILE_PATH = `.github/workflows/${WORKFLOW_FILE_NAME}`;
+export const GITHUB_PROJECT_ID_SECRET_NAME = "STACK_AUTH_PROJECT_ID";
+export const GITHUB_SECRET_SERVER_KEY_SECRET_NAME = "STACK_AUTH_SECRET_SERVER_KEY";
+
+function encodeYamlScalar(value: string): string {
+  return JSON.stringify(value);
+}
+
+export function buildWorkflowYaml(branch: string, configPath: string): string {
+  const encodedBranch = encodeYamlScalar(branch);
+  const encodedConfigPath = encodeYamlScalar(configPath);
+  const encodedWorkflowPath = encodeYamlScalar(WORKFLOW_FILE_PATH);
+
+  return `name: Stack Auth Config Sync
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - ${encodedBranch}
+    paths:
+      - ${encodedConfigPath}
+      - ${encodedWorkflowPath}
+
+jobs:
+  push-stack-config:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Push Stack Auth config
+        env:
+          STACK_PROJECT_ID: \${{ secrets.${GITHUB_PROJECT_ID_SECRET_NAME} }}
+          STACK_SECRET_SERVER_KEY: \${{ secrets.${GITHUB_SECRET_SERVER_KEY_SECRET_NAME} }}
+          STACK_AUTH_CONFIG_PATH: ${encodedConfigPath}
+        run: pnpx @stackframe/stack-cli@latest config push --config-file "$STACK_AUTH_CONFIG_PATH"
+`;
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/link-existing-onboarding.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/link-existing-onboarding.tsx
new file mode 100644
index 0000000000..82d899b8be
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/link-existing-onboarding.tsx
@@ -0,0 +1,1602 @@
+"use client";
+
+import { DesignAlert } from "@/components/design-components/alert";
+import { DesignButton } from "@/components/design-components/button";
+import { DesignCard } from "@/components/design-components/card";
+import { DesignInput } from "@/components/design-components/input";
+import { DesignSelectorDropdown } from "@/components/design-components/select";
+import { ActionDialog, Spinner, Typography, cn } from "@/components/ui";
+import { GithubLogoIcon, LinkBreakIcon, TerminalWindowIcon } from "@phosphor-icons/react";
+import { type AdminOwnedProject, type PushedConfigSource, useUser } from "@stackframe/stack";
+import { captureError } from "@stackframe/stack-shared/dist/utils/errors";
+import { runAsynchronouslyWithAlert, wait } from "@stackframe/stack-shared/dist/utils/promises";
+import { deindent, stringCompare } from "@stackframe/stack-shared/dist/utils/strings";
+import { urlString } from "@stackframe/stack-shared/dist/utils/urls";
+import sodium from "libsodium-wrappers";
+import { useCallback, useMemo, useRef, useState } from "react";
+
+import { OnboardingPage } from "./components";
+import {
+  buildWorkflowYaml,
+  GITHUB_PROJECT_ID_SECRET_NAME,
+  GITHUB_SECRET_SERVER_KEY_SECRET_NAME,
+  WORKFLOW_FILE_NAME,
+  WORKFLOW_FILE_PATH,
+} from "./link-existing-onboarding-workflow";
+import type { TimelineStep } from "./shared";
+
+type LinkExistingStep = "choose-method" | "local" | "github-repository" | "github-config-path" | "github-logs";
+
+type GithubRepository = {
+  id: number,
+  fullName: string,
+  defaultBranch: string,
+  isPrivate: boolean,
+};
+
+type GithubPublicKey = {
+  key: string,
+  keyId: string,
+};
+
+type GithubUser = {
+  login: string,
+};
+
+type GithubWorkflowRun = {
+  id: number,
+  runNumber: number | null,
+  status: string,
+  conclusion: string | null,
+  htmlUrl: string | null,
+};
+
+type GithubWorkflowJob = {
+  id: number,
+  name: string,
+  status: string,
+  conclusion: string | null,
+  steps: {
+    name: string,
+    status: string,
+    conclusion: string | null,
+  }[],
+};
+
+type WorkflowFailureState = {
+  runId: number,
+  runNumber: number | null,
+  conclusion: string | null,
+  runUrl: string | null,
+};
+
+type Props = {
+  project: AdminOwnedProject,
+  steps: TimelineStep[],
+  disabled: boolean,
+  currentStep: TimelineStep["id"],
+  onStepClick: (step: TimelineStep["id"]) => void,
+  onBack: () => void,
+  onContinueAfterLink: () => Promise<void>,
+};
+
+type PersistedLinkExistingState = {
+  step: LinkExistingStep,
+  selectedGithubAccountId: string | null,
+  selectedRepositoryFullName: string,
+  selectedBranch: string,
+  configPathInput: string,
+};
+
+function createRepositoryReference(fullName: string, defaultBranch: string): GithubRepository {
+  return {
+    id: 0,
+    fullName,
+    defaultBranch,
+    isPrivate: false,
+  };
+}
+
+const GITHUB_SCOPE_REQUIREMENTS = ["repo", "workflow"];
+const CONNECT_NEW_GITHUB_ACCOUNT_OPTION = "__connect-new-github-account__";
+const LINK_EXISTING_STEPS: LinkExistingStep[] = ["choose-method", "local", "github-repository", "github-config-path", "github-logs"];
+
+function getLinkExistingStorageKey(projectId: string): string {
+  return `stack-auth-link-existing-onboarding:${projectId}`;
+}
+
+function parsePersistedLinkExistingStep(value: unknown): LinkExistingStep {
+  if (typeof value !== "string") {
+    return "choose-method";
+  }
+  return LINK_EXISTING_STEPS.includes(value as LinkExistingStep)
+    ? value as LinkExistingStep
+    : "choose-method";
+}
+
+function readPersistedLinkExistingState(projectId: string): PersistedLinkExistingState | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const raw = window.localStorage.getItem(getLinkExistingStorageKey(projectId));
+  if (raw == null) {
+    return null;
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    if (!isObject(parsed)) {
+      return null;
+    }
+    const selectedGithubAccountIdField = parsed.selectedGithubAccountId;
+    return {
+      step: parsePersistedLinkExistingStep(parsed.step),
+      selectedGithubAccountId: typeof selectedGithubAccountIdField === "string" ? selectedGithubAccountIdField : null,
+      selectedRepositoryFullName: getObjectString(parsed, "selectedRepositoryFullName") ?? "",
+      selectedBranch: getObjectString(parsed, "selectedBranch") ?? "",
+      configPathInput: getObjectString(parsed, "configPathInput") ?? "stack.config.ts",
+    };
+  } catch {
+    return null;
+  }
+}
+
+function persistLinkExistingState(projectId: string, state: PersistedLinkExistingState): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+  window.localStorage.setItem(getLinkExistingStorageKey(projectId), JSON.stringify(state));
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function getObjectString(value: Record<string, unknown>, key: string): string | null {
+  const field = value[key];
+  return typeof field === "string" ? field : null;
+}
+
+function getObjectNumber(value: Record<string, unknown>, key: string): number | null {
+  const field = value[key];
+  return typeof field === "number" ? field : null;
+}
+
+function parseGithubRepositories(value: unknown): GithubRepository[] {
+  if (!Array.isArray(value)) {
+    throw new Error("GitHub returned an invalid repositories response.");
+  }
+
+  const repositories: GithubRepository[] = [];
+  for (const item of value) {
+    if (!isObject(item)) {
+      continue;
+    }
+
+    const id = getObjectNumber(item, "id");
+    const fullName = getObjectString(item, "full_name");
+    const defaultBranch = getObjectString(item, "default_branch");
+    const isPrivateField = item.private;
+    const isPrivate = typeof isPrivateField === "boolean" ? isPrivateField : false;
+
+    if (id == null || fullName == null || defaultBranch == null) {
+      continue;
+    }
+
+    repositories.push({
+      id,
+      fullName,
+      defaultBranch,
+      isPrivate,
+    });
+  }
+
+  return repositories;
+}
+
+function parseGithubBranches(value: unknown): string[] {
+  if (!Array.isArray(value)) {
+    throw new Error("GitHub returned an invalid branches response.");
+  }
+
+  const branches: string[] = [];
+  for (const item of value) {
+    if (!isObject(item)) {
+      continue;
+    }
+    const name = getObjectString(item, "name");
+    if (name != null) {
+      branches.push(name);
+    }
+  }
+  return branches;
+}
+
+function parseGithubPublicKey(value: unknown): GithubPublicKey {
+  if (!isObject(value)) {
+    throw new Error("GitHub returned an invalid public key response.");
+  }
+
+  const key = getObjectString(value, "key");
+  const keyId = getObjectString(value, "key_id");
+  if (key == null || keyId == null) {
+    throw new Error("GitHub public key response is missing required fields.");
+  }
+
+  return { key, keyId };
+}
+
+function parseGithubUser(value: unknown): GithubUser {
+  if (!isObject(value)) {
+    throw new Error("GitHub returned an invalid user response.");
+  }
+  const login = getObjectString(value, "login");
+  if (login == null || login.length === 0) {
+    throw new Error("GitHub user response is missing login.");
+  }
+  return { login };
+}
+
+function parseGithubWorkflowRuns(value: unknown): GithubWorkflowRun[] {
+  if (!isObject(value)) {
+    throw new Error("GitHub returned an invalid workflow runs response.");
+  }
+  const runsField = value.workflow_runs;
+  if (!Array.isArray(runsField)) {
+    throw new Error("GitHub workflow runs response is missing workflow_runs.");
+  }
+
+  const runs: GithubWorkflowRun[] = [];
+  for (const item of runsField) {
+    if (!isObject(item)) {
+      continue;
+    }
+    const id = getObjectNumber(item, "id");
+    if (id == null) {
+      continue;
+    }
+    const status = getObjectString(item, "status") ?? "unknown";
+    const conclusionField = item.conclusion;
+    const conclusion = typeof conclusionField === "string" ? conclusionField : null;
+    runs.push({
+      id,
+      runNumber: getObjectNumber(item, "run_number"),
+      status,
+      conclusion,
+      htmlUrl: getObjectString(item, "html_url"),
+    });
+  }
+  return runs;
+}
+
+function parseGithubWorkflowJobs(value: unknown): GithubWorkflowJob[] {
+  if (!isObject(value)) {
+    throw new Error("GitHub returned an invalid workflow jobs response.");
+  }
+  const jobsField = value.jobs;
+  if (!Array.isArray(jobsField)) {
+    throw new Error("GitHub workflow jobs response is missing jobs.");
+  }
+
+  const jobs: GithubWorkflowJob[] = [];
+  for (const jobItem of jobsField) {
+    if (!isObject(jobItem)) {
+      continue;
+    }
+    const id = getObjectNumber(jobItem, "id");
+    const name = getObjectString(jobItem, "name");
+    if (id == null || name == null) {
+      continue;
+    }
+    const status = getObjectString(jobItem, "status") ?? "unknown";
+    const conclusionField = jobItem.conclusion;
+    const conclusion = typeof conclusionField === "string" ? conclusionField : null;
+
+    const stepsField = jobItem.steps;
+    const steps: GithubWorkflowJob["steps"] = [];
+    if (Array.isArray(stepsField)) {
+      for (const stepItem of stepsField) {
+        if (!isObject(stepItem)) {
+          continue;
+        }
+        const stepName = getObjectString(stepItem, "name");
+        if (stepName == null) {
+          continue;
+        }
+        const stepStatus = getObjectString(stepItem, "status") ?? "unknown";
+        const stepConclusionField = stepItem.conclusion;
+        const stepConclusion = typeof stepConclusionField === "string" ? stepConclusionField : null;
+        steps.push({
+          name: stepName,
+          status: stepStatus,
+          conclusion: stepConclusion,
+        });
+      }
+    }
+
+    jobs.push({
+      id,
+      name,
+      status,
+      conclusion,
+      steps,
+    });
+  }
+
+  return jobs;
+}
+
+function parseGitTreePaths(value: unknown): { paths: string[], truncated: boolean } {
+  if (!isObject(value)) {
+    throw new Error("GitHub returned an invalid git tree response.");
+  }
+
+  const tree = value.tree;
+  if (!Array.isArray(tree)) {
+    throw new Error("GitHub git tree response is missing entries.");
+  }
+
+  const truncatedField = value.truncated;
+  const truncated = typeof truncatedField === "boolean" ? truncatedField : false;
+
+  const paths: string[] = [];
+  for (const item of tree) {
+    if (!isObject(item)) {
+      continue;
+    }
+
+    const type = getObjectString(item, "type");
+    const path = getObjectString(item, "path");
+    if (type === "blob" && path != null) {
+      paths.push(path);
+    }
+  }
+  return { paths, truncated };
+}
+
+function parseGitReferenceSha(value: unknown): string {
+  if (!isObject(value)) {
+    throw new Error("GitHub returned an invalid branch reference response.");
+  }
+  const objectField = value.object;
+  if (!isObject(objectField)) {
+    throw new Error("GitHub branch reference is missing object details.");
+  }
+  const sha = getObjectString(objectField, "sha");
+  if (sha == null) {
+    throw new Error("GitHub branch reference is missing sha.");
+  }
+  return sha;
+}
+
+function parseRepositoryFullName(fullName: string): { owner: string, repo: string } {
+  const slashIndex = fullName.indexOf("/");
+  if (slashIndex <= 0 || slashIndex >= fullName.length - 1) {
+    throw new Error("Selected repository has an invalid full name.");
+  }
+
+  return {
+    owner: fullName.slice(0, slashIndex),
+    repo: fullName.slice(slashIndex + 1),
+  };
+}
+
+function githubRepositoryApiPath(owner: string, repo: string, tail: string): string {
+  return urlString`/repos/${owner}/${repo}` + tail;
+}
+
+function encodeGitHubPath(path: string): string {
+  return path
+    .split("/")
+    .map((segment) => encodeURIComponent(segment))
+    .join("/");
+}
+
+async function encryptSecretValue(value: string, base64PublicKey: string): Promise<string> {
+  await sodium.ready;
+  const valueBytes = sodium.from_string(value);
+  const publicKeyBytes = sodium.from_base64(base64PublicKey, sodium.base64_variants.ORIGINAL);
+  const encryptedBytes = sodium.crypto_box_seal(valueBytes, publicKeyBytes);
+  return sodium.to_base64(encryptedBytes, sodium.base64_variants.ORIGINAL);
+}
+
+function buildConfigPathSuggestions(paths: string[]): string[] {
+  return paths
+    .filter((path) => path.endsWith("/stack.config.ts") || path.endsWith("/stack.config.js") || path === "stack.config.ts" || path === "stack.config.js")
+    .map((path) => path.startsWith("./") ? path : `./${path}`)
+    .sort((a, b) => stringCompare(a, b));
+}
+
+function getSourceLabel(source: PushedConfigSource | null): string {
+  if (source == null) return "Unknown";
+  if (source.type === "unlinked") return "Unlinked";
+  if (source.type === "pushed-from-unknown") return "Pushed via CLI";
+  return `GitHub (${source.owner}/${source.repo}@${source.branch})`;
+}
+
+function formatWorkflowState(status: string, conclusion: string | null): string {
+  if (status === "completed") {
+    return conclusion == null ? "completed" : `completed (${conclusion})`;
+  }
+  return status;
+}
+
+export function LinkExistingOnboarding(props: Props) {
+  const { project, onContinueAfterLink } = props;
+  const user = useUser({ or: "redirect", projectIdMustMatch: "internal" });
+  const githubAccounts = user.useConnectedAccounts().filter((account) => account.provider === "github");
+  const persistedState = useMemo(() => readPersistedLinkExistingState(project.id), [project.id]);
+
+  const [step, setStep] = useState<LinkExistingStep>(persistedState?.step ?? "choose-method");
+  const [selectedGithubAccountId, setSelectedGithubAccountId] = useState<string | null>(persistedState?.selectedGithubAccountId ?? null);
+  const [githubAccountLogins, setGithubAccountLogins] = useState<Map<string, string>>(new Map());
+  const [repositories, setRepositories] = useState<GithubRepository[]>([]);
+  const [loadingRepositories, setLoadingRepositories] = useState(false);
+  const [selectedRepositoryFullName, setSelectedRepositoryFullName] = useState<string>(persistedState?.selectedRepositoryFullName ?? "");
+  const [branches, setBranches] = useState<string[]>([]);
+  const [loadingBranches, setLoadingBranches] = useState(false);
+  const [selectedBranch, setSelectedBranch] = useState<string>(persistedState?.selectedBranch ?? "");
+  const [configPathSuggestions, setConfigPathSuggestions] = useState<string[]>([]);
+  const [gitTreeTruncated, setGitTreeTruncated] = useState(false);
+  const [loadingConfigPathSuggestions, setLoadingConfigPathSuggestions] = useState(false);
+  const [isCommitDialogOpen, setIsCommitDialogOpen] = useState(false);
+  const [commitMessage, setCommitMessage] = useState("chore(stack-auth): add Stack Auth config sync workflow");
+  const [commitDescription, setCommitDescription] = useState("Add a GitHub Actions workflow that pushes stack.config to Stack Auth whenever it changes.");
+  const [isSettingUpGithubWorkflow, setIsSettingUpGithubWorkflow] = useState(false);
+  const [isCheckingSource, setIsCheckingSource] = useState(false);
+  const [isAwaitingLocalPush, setIsAwaitingLocalPush] = useState(false);
+  const [pushedConfigSource, setPushedConfigSource] = useState<PushedConfigSource | null>(null);
+  const [latestWorkflowRunUrl, setLatestWorkflowRunUrl] = useState<string | null>(null);
+  const [workflowFailure, setWorkflowFailure] = useState<WorkflowFailureState | null>(null);
+  const [generatedSecretServerKey, setGeneratedSecretServerKey] = useState<string | null>(null);
+  const [logs, setLogs] = useState<string[]>([]);
+  const pollingRunIdRef = useRef(0);
+  const localMonitoringRunIdRef = useRef(0);
+  const latestWorkflowSnapshotRef = useRef<string | null>(null);
+  const capturedWorkflowFailureRef = useRef<string | null>(null);
+  const localAutoMonitoringKeyRef = useRef<string | null>(null);
+  const githubLogsAutoPollingKeyRef = useRef<string | null>(null);
+  const [configPathInput, setConfigPathInput] = useState<string>(persistedState?.configPathInput ?? "stack.config.ts");
+
+  const persistState = useCallback((partial: Partial<PersistedLinkExistingState>) => {
+    const existingState = readPersistedLinkExistingState(project.id);
+    persistLinkExistingState(project.id, {
+      step: partial.step ?? existingState?.step ?? step,
+      selectedGithubAccountId: partial.selectedGithubAccountId ?? existingState?.selectedGithubAccountId ?? selectedGithubAccountId,
+      selectedRepositoryFullName: partial.selectedRepositoryFullName ?? existingState?.selectedRepositoryFullName ?? selectedRepositoryFullName,
+      selectedBranch: partial.selectedBranch ?? existingState?.selectedBranch ?? selectedBranch,
+      configPathInput: partial.configPathInput ?? existingState?.configPathInput ?? configPathInput,
+      ...partial,
+    });
+  }, [configPathInput, project.id, selectedBranch, selectedGithubAccountId, selectedRepositoryFullName, step]);
+
+  const setStepWithPersistence = useCallback((nextStep: LinkExistingStep) => {
+    if (nextStep !== "github-logs") {
+      pollingRunIdRef.current += 1;
+      setIsCheckingSource(false);
+      latestWorkflowSnapshotRef.current = null;
+    }
+    if (nextStep !== "local") {
+      localMonitoringRunIdRef.current += 1;
+      setIsAwaitingLocalPush(false);
+    }
+    setStep(nextStep);
+    persistState({ step: nextStep });
+  }, [persistState]);
+
+  const setSelectedGithubAccountIdWithPersistence = useCallback((nextAccountId: string | null) => {
+    setSelectedGithubAccountId(nextAccountId);
+    persistState({ selectedGithubAccountId: nextAccountId });
+  }, [persistState]);
+
+  const setSelectedRepositoryFullNameWithPersistence = useCallback((nextRepositoryFullName: string) => {
+    setSelectedRepositoryFullName(nextRepositoryFullName);
+    persistState({ selectedRepositoryFullName: nextRepositoryFullName });
+  }, [persistState]);
+
+  const setSelectedBranchWithPersistence = useCallback((nextBranch: string) => {
+    setSelectedBranch(nextBranch);
+    persistState({ selectedBranch: nextBranch });
+  }, [persistState]);
+
+  const setConfigPathInputWithPersistence = useCallback((nextConfigPath: string) => {
+    setConfigPathInput(nextConfigPath);
+    persistState({ configPathInput: nextConfigPath });
+  }, [persistState]);
+
+  const selectedGithubAccount = useMemo(() => {
+    if (githubAccounts.length === 0) {
+      return null;
+    }
+    if (selectedGithubAccountId == null) {
+      return githubAccounts[0];
+    }
+    return githubAccounts.find((account) => account.providerAccountId === selectedGithubAccountId) ?? githubAccounts[0];
+  }, [githubAccounts, selectedGithubAccountId]);
+
+  const selectedRepository = useMemo(() => {
+    const repository = repositories.find((entry) => entry.fullName === selectedRepositoryFullName) ?? null;
+    if (repository != null) {
+      return repository;
+    }
+    if (selectedRepositoryFullName.length === 0) {
+      return null;
+    }
+    return createRepositoryReference(selectedRepositoryFullName, selectedBranch);
+  }, [repositories, selectedBranch, selectedRepositoryFullName]);
+
+  const appendLog = useCallback((message: string) => {
+    const timestamp = new Date().toLocaleTimeString();
+    setLogs((previous) => {
+      const next = [...previous, `[${timestamp}] ${message}`];
+      return next.slice(-200);
+    });
+  }, []);
+
+  const githubFetch = useCallback(async (
+    path: string,
+    requestInit?: RequestInit,
+    accountOverride?: typeof selectedGithubAccount,
+  ): Promise<unknown> => {
+    const account = accountOverride ?? selectedGithubAccount;
+    if (account == null) {
+      throw new Error("Connect a GitHub account before continuing.");
+    }
+    const tokenResult = await account.getAccessToken({ scopes: GITHUB_SCOPE_REQUIREMENTS });
+    if (tokenResult.status === "error") {
+      throw new Error("Could not get a GitHub access token. Reconnect your GitHub account and try again.");
+    }
+
+    const response = await fetch(new URL(path, "https://api.github.com").toString(), {
+      ...requestInit,
+      headers: {
+        Accept: "application/vnd.github+json",
+        Authorization: `Bearer ${tokenResult.data.accessToken}`,
+        ...(requestInit?.headers ?? {}),
+      },
+    });
+
+    if (response.status === 204) {
+      if (!response.ok) {
+        throw new Error("GitHub API request failed.");
+      }
+      return null;
+    }
+
+    const responseText = await response.text();
+    const parsedBody = responseText.length > 0 ? JSON.parse(responseText) : null;
+
+    if (!response.ok) {
+      const parsedMessage = isObject(parsedBody) ? getObjectString(parsedBody, "message") : null;
+      throw new Error(parsedMessage ?? `GitHub API request failed with status ${response.status}.`);
+    }
+
+    return parsedBody;
+  }, [selectedGithubAccount]);
+
+  const refreshSourceStatus = useCallback(async () => {
+    const source = await project.getPushedConfigSource();
+    setPushedConfigSource(source);
+    if (source.type === "unlinked") {
+      appendLog("Config source is still unlinked.");
+    } else if (source.type === "pushed-from-unknown") {
+      appendLog("Config has been pushed from CLI.");
+    } else {
+      appendLog(`Config now linked to ${source.owner}/${source.repo}@${source.branch}.`);
+    }
+    return source;
+  }, [appendLog, project]);
+
+  const refreshLatestWorkflowLogs = useCallback(async (repositoryFullName: string, branch: string) => {
+    if (repositoryFullName.length === 0 || branch.length === 0) {
+      return;
+    }
+    const { owner, repo } = parseRepositoryFullName(repositoryFullName);
+    const runsQuery = new URLSearchParams({
+      branch,
+      per_page: "1",
+    }).toString();
+
+    const workflowRunsResponse = await githubFetch(
+      githubRepositoryApiPath(owner, repo, urlString`/actions/workflows/${WORKFLOW_FILE_NAME}/runs?${runsQuery}`),
+    );
+    const workflowRuns = parseGithubWorkflowRuns(workflowRunsResponse);
+    if (workflowRuns.length === 0) {
+      setLatestWorkflowRunUrl(null);
+      setWorkflowFailure(null);
+      if (latestWorkflowSnapshotRef.current !== "no-run") {
+        appendLog("No workflow run found yet. Waiting for GitHub to start it...");
+        latestWorkflowSnapshotRef.current = "no-run";
+      }
+      return;
+    }
+
+    const latestRun = workflowRuns[0];
+    setLatestWorkflowRunUrl(latestRun.htmlUrl);
+    const jobsResponse = await githubFetch(
+      githubRepositoryApiPath(owner, repo, urlString`/actions/runs/${latestRun.id}/jobs?per_page=100`),
+    );
+    const jobs = parseGithubWorkflowJobs(jobsResponse);
+
+    const workflowFailed = latestRun.status === "completed" && latestRun.conclusion !== "success";
+    if (workflowFailed) {
+      const failure = {
+        runId: latestRun.id,
+        runNumber: latestRun.runNumber,
+        conclusion: latestRun.conclusion,
+        runUrl: latestRun.htmlUrl,
+      };
+      setWorkflowFailure(failure);
+      const captureKey = JSON.stringify(failure);
+      if (capturedWorkflowFailureRef.current !== captureKey) {
+        capturedWorkflowFailureRef.current = captureKey;
+        captureError("link-existing-workflow-failed", {
+          projectId: project.id,
+          repositoryFullName,
+          branch,
+          configPath: configPathInput,
+          pushedConfigSource,
+          run: {
+            id: latestRun.id,
+            number: latestRun.runNumber,
+            status: latestRun.status,
+            conclusion: latestRun.conclusion,
+            htmlUrl: latestRun.htmlUrl,
+          },
+          jobs,
+        });
+      }
+    } else {
+      setWorkflowFailure(null);
+    }
+
+    const snapshot = JSON.stringify({
+      runId: latestRun.id,
+      status: latestRun.status,
+      conclusion: latestRun.conclusion,
+      jobs: jobs.map((job) => ({
+        id: job.id,
+        status: job.status,
+        conclusion: job.conclusion,
+        steps: job.steps.map((step) => ({
+          name: step.name,
+          status: step.status,
+          conclusion: step.conclusion,
+        })),
+      })),
+    });
+    if (latestWorkflowSnapshotRef.current === snapshot) {
+      return;
+    }
+    latestWorkflowSnapshotRef.current = snapshot;
+
+    appendLog(
+      `Workflow run #${latestRun.runNumber ?? latestRun.id}: ${formatWorkflowState(latestRun.status, latestRun.conclusion)}.`,
+    );
+    if (latestRun.htmlUrl != null) {
+      appendLog(`Run URL: ${latestRun.htmlUrl}`);
+    }
+    for (const job of jobs) {
+      appendLog(`Job ${job.name}: ${formatWorkflowState(job.status, job.conclusion)}.`);
+      for (const stepEntry of job.steps) {
+        appendLog(`  - ${stepEntry.name}: ${formatWorkflowState(stepEntry.status, stepEntry.conclusion)}.`);
+      }
+    }
+  }, [appendLog, configPathInput, githubFetch, project.id, pushedConfigSource]);
+
+  const pollForLinkedSource = useCallback(async (options?: {
+    repositoryFullName?: string,
+    branch?: string,
+  }) => {
+    const repositoryFullName = options?.repositoryFullName ?? selectedRepositoryFullName;
+    const branch = options?.branch ?? selectedBranch;
+    const startedRunId = pollingRunIdRef.current + 1;
+    pollingRunIdRef.current = startedRunId;
+    setIsCheckingSource(true);
+
+    try {
+      while (true) {
+        if (pollingRunIdRef.current !== startedRunId) {
+          return;
+        }
+
+        if (repositoryFullName.length > 0 && branch.length > 0) {
+          try {
+            await refreshLatestWorkflowLogs(repositoryFullName, branch);
+          } catch (error) {
+            const message = error instanceof Error ? error.message : "Unknown error";
+            const errorSnapshot = `workflow-log-error:${message}`;
+            if (latestWorkflowSnapshotRef.current !== errorSnapshot) {
+              latestWorkflowSnapshotRef.current = errorSnapshot;
+              appendLog(`Could not fetch workflow logs yet: ${message}`);
+            }
+          }
+        }
+
+        const source = await project.getPushedConfigSource();
+        setPushedConfigSource(source);
+        if (source.type !== "unlinked") {
+          try {
+            await project.getConfig();
+          } catch (error) {
+            captureError("link-existing-refresh-config-cache", {
+              projectId: project.id,
+              context: "github-logs",
+              repositoryFullName,
+              branch,
+              cause: error,
+            });
+          }
+          appendLog("Config push detected. You can continue.");
+          return;
+        }
+
+        appendLog("Waiting for the config push to complete...");
+        await wait(1000);
+      }
+    } finally {
+      if (pollingRunIdRef.current === startedRunId) {
+        setIsCheckingSource(false);
+      }
+    }
+  }, [appendLog, project, refreshLatestWorkflowLogs, selectedBranch, selectedRepositoryFullName]);
+
+  const loadRepositories = useCallback(async (
+    options?: {
+      accountOverride?: typeof selectedGithubAccount,
+    },
+  ): Promise<void> => {
+    const account = options?.accountOverride ?? selectedGithubAccount;
+    if (account == null) {
+      throw new Error("Connect a GitHub account before loading repositories.");
+    }
+
+    setLoadingRepositories(true);
+    try {
+      const userResponse = await githubFetch("/user", undefined, account);
+      const githubUser = parseGithubUser(userResponse);
+      setGithubAccountLogins((previous) => {
+        const next = new Map(previous);
+        next.set(account.providerAccountId, githubUser.login);
+        return next;
+      });
+
+      const response = await githubFetch(
+        "/user/repos?per_page=100&sort=updated&affiliation=owner,collaborator,organization_member",
+        undefined,
+        account,
+      );
+      const parsedRepositories = parseGithubRepositories(response);
+      setRepositories(parsedRepositories);
+      setBranches([]);
+      setSelectedBranchWithPersistence("");
+      setConfigPathSuggestions([]);
+      setGitTreeTruncated(false);
+
+      let nextRepositoryFullName = selectedRepositoryFullName;
+      if (nextRepositoryFullName.length === 0) {
+        for (const repository of parsedRepositories) {
+          nextRepositoryFullName = repository.fullName;
+          break;
+        }
+      }
+      setSelectedRepositoryFullNameWithPersistence(nextRepositoryFullName);
+
+      if (nextRepositoryFullName.length > 0) {
+        let matchingRepository: GithubRepository | undefined = parsedRepositories.find((repository) => repository.fullName === nextRepositoryFullName);
+        if (matchingRepository === undefined) {
+          for (const repository of parsedRepositories) {
+            matchingRepository = repository;
+            break;
+          }
+        }
+        if (matchingRepository !== undefined) {
+          setSelectedBranchWithPersistence(matchingRepository.defaultBranch);
+        }
+      }
+    } finally {
+      setLoadingRepositories(false);
+    }
+  }, [githubFetch, selectedGithubAccount, selectedRepositoryFullName, setSelectedBranchWithPersistence, setSelectedRepositoryFullNameWithPersistence]);
+
+  const openGithubRepositoryStep = useCallback(async (options?: { forceConnect?: boolean }) => {
+    setStepWithPersistence("github-repository");
+    appendLog("Switched to GitHub linking flow.");
+    if (options?.forceConnect) {
+      await user.getOrLinkConnectedAccount("github", { scopes: GITHUB_SCOPE_REQUIREMENTS });
+    }
+    await loadRepositories();
+  }, [appendLog, loadRepositories, setStepWithPersistence, user]);
+
+  const loadBranches = useCallback(async (repositoryFullName: string): Promise<string> => {
+    if (repositoryFullName.length === 0) {
+      throw new Error("Select a repository before loading branches.");
+    }
+    const repository = repositories.find((item) => item.fullName === repositoryFullName) ?? createRepositoryReference(repositoryFullName, selectedBranch);
+
+    const { owner, repo } = parseRepositoryFullName(repository.fullName);
+    setLoadingBranches(true);
+    try {
+      const response = await githubFetch(githubRepositoryApiPath(owner, repo, "/branches?per_page=100"));
+      const parsedBranches = parseGithubBranches(response);
+      setBranches(parsedBranches);
+      const resolvedBranch = parsedBranches.includes(repository.defaultBranch) ? repository.defaultBranch : (parsedBranches[0] ?? "");
+      setSelectedBranchWithPersistence(resolvedBranch);
+      return resolvedBranch;
+    } finally {
+      setLoadingBranches(false);
+    }
+  }, [githubFetch, repositories, selectedBranch, setSelectedBranchWithPersistence]);
+
+  type LoadConfigSuggestionsOptions = {
+    repository: GithubRepository,
+    branch: string,
+  };
+
+  const loadConfigSuggestions = useCallback(async (options?: LoadConfigSuggestionsOptions) => {
+    const repository = options?.repository ?? selectedRepository;
+    const branch = options?.branch ?? selectedBranch;
+    if (repository == null || branch.length === 0) {
+      throw new Error("Select repository and branch first.");
+    }
+
+    const { owner, repo } = parseRepositoryFullName(repository.fullName);
+    setLoadingConfigPathSuggestions(true);
+    try {
+      setConfigPathInputWithPersistence("");
+      setGitTreeTruncated(false);
+      const referenceResponse = await githubFetch(githubRepositoryApiPath(owner, repo, urlString`/git/ref/heads/${branch}`));
+      const treeSha = parseGitReferenceSha(referenceResponse);
+      const treeResponse = await githubFetch(githubRepositoryApiPath(owner, repo, urlString`/git/trees/${treeSha}?recursive=1`));
+      const { paths: allPaths, truncated } = parseGitTreePaths(treeResponse);
+      setGitTreeTruncated(truncated);
+      const suggestions = buildConfigPathSuggestions(allPaths);
+      setConfigPathSuggestions(suggestions);
+      if (suggestions.length === 1) {
+        setConfigPathInputWithPersistence(suggestions[0]);
+      }
+    } finally {
+      setLoadingConfigPathSuggestions(false);
+    }
+  }, [githubFetch, selectedBranch, selectedRepository, setConfigPathInputWithPersistence]);
+
+  const upsertGitHubSecret = useCallback(async (
+    owner: string,
+    repo: string,
+    secretName: string,
+    secretValue: string,
+    publicKey: GithubPublicKey,
+  ) => {
+    const encryptedValue = await encryptSecretValue(secretValue, publicKey.key);
+    await githubFetch(githubRepositoryApiPath(owner, repo, urlString`/actions/secrets/${secretName}`), {
+      method: "PUT",
+      headers: {
+        "content-type": "application/json",
+      },
+      body: JSON.stringify({
+        encrypted_value: encryptedValue,
+        key_id: publicKey.keyId,
+      }),
+    });
+  }, [githubFetch]);
+
+  const getExistingWorkflowSha = useCallback(async (owner: string, repo: string, branch: string) => {
+    const refQuery = new URLSearchParams({ ref: branch }).toString();
+    const response = await githubFetch(
+      githubRepositoryApiPath(owner, repo, `/contents/${encodeGitHubPath(WORKFLOW_FILE_PATH)}?${refQuery}`),
+    );
+
+    if (!isObject(response)) {
+      return null;
+    }
+
+    const sha = getObjectString(response, "sha");
+    return sha;
+  }, [githubFetch]);
+
+  const createGithubWorkflowCommit = useCallback(async (
+    owner: string,
+    repo: string,
+    branch: string,
+    workflowContent: string,
+    workflowCommitMessage: string,
+    workflowCommitDescription: string,
+  ) => {
+    let existingSha: string | null = null;
+
+    try {
+      existingSha = await getExistingWorkflowSha(owner, repo, branch);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Unknown GitHub error";
+      if (!errorMessage.includes("Not Found")) {
+        throw error;
+      }
+    }
+
+    await sodium.ready;
+    const encodedContent = sodium.to_base64(sodium.from_string(workflowContent), sodium.base64_variants.ORIGINAL);
+    const fullCommitMessage = workflowCommitDescription.trim().length > 0
+      ? `${workflowCommitMessage.trim()}\n\n${workflowCommitDescription.trim()}`
+      : workflowCommitMessage.trim();
+
+    await githubFetch(githubRepositoryApiPath(owner, repo, `/contents/${encodeGitHubPath(WORKFLOW_FILE_PATH)}`), {
+      method: "PUT",
+      headers: {
+        "content-type": "application/json",
+      },
+      body: JSON.stringify({
+        message: fullCommitMessage,
+        content: encodedContent,
+        branch,
+        sha: existingSha ?? undefined,
+      }),
+    });
+  }, [getExistingWorkflowSha, githubFetch]);
+
+  const triggerGithubWorkflow = useCallback(async (owner: string, repo: string, branch: string) => {
+    await githubFetch(githubRepositoryApiPath(owner, repo, urlString`/actions/workflows/${WORKFLOW_FILE_NAME}/dispatches`), {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+      },
+      body: JSON.stringify({ ref: branch }),
+    });
+  }, [githubFetch]);
+
+  const setupGithubWorkflow = useCallback(async () => {
+    if (selectedRepository == null) {
+      throw new Error("Select a repository first.");
+    }
+    if (selectedBranch.length === 0) {
+      throw new Error("Select a branch first.");
+    }
+    if (configPathInput.trim().length === 0) {
+      throw new Error("Config path is required.");
+    }
+
+    const { owner, repo } = parseRepositoryFullName(selectedRepository.fullName);
+    setIsSettingUpGithubWorkflow(true);
+    setLogs([]);
+    setWorkflowFailure(null);
+    setLatestWorkflowRunUrl(null);
+    latestWorkflowSnapshotRef.current = null;
+    capturedWorkflowFailureRef.current = null;
+    appendLog("Preparing GitHub workflow setup...");
+    if (gitTreeTruncated) {
+      appendLog("Note: GitHub returned a truncated tree when suggesting config paths; double-check the workflow path if the run fails.");
+    }
+
+    try {
+      let secretServerKey = generatedSecretServerKey;
+      if (secretServerKey == null) {
+        appendLog("Generating a project secret server key...");
+        const createdApiKey = await project.app.createInternalApiKey({
+          description: `GitHub config sync (${owner}/${repo})`,
+          expiresAt: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365),
+          hasPublishableClientKey: false,
+          hasSecretServerKey: true,
+          hasSuperSecretAdminKey: false,
+        });
+        if (createdApiKey.secretServerKey == null) {
+          throw new Error("Stack Auth did not return a secret server key.");
+        }
+        secretServerKey = createdApiKey.secretServerKey;
+        setGeneratedSecretServerKey(secretServerKey);
+        appendLog("Secret server key created.");
+      }
+
+      appendLog("Fetching GitHub Actions public key...");
+      const publicKeyResponse = await githubFetch(githubRepositoryApiPath(owner, repo, "/actions/secrets/public-key"));
+      const publicKey = parseGithubPublicKey(publicKeyResponse);
+
+      appendLog(`Setting ${GITHUB_PROJECT_ID_SECRET_NAME} secret...`);
+      await upsertGitHubSecret(owner, repo, GITHUB_PROJECT_ID_SECRET_NAME, project.id, publicKey);
+      appendLog(`Setting ${GITHUB_SECRET_SERVER_KEY_SECRET_NAME} secret...`);
+      await upsertGitHubSecret(owner, repo, GITHUB_SECRET_SERVER_KEY_SECRET_NAME, secretServerKey, publicKey);
+
+      appendLog("Creating Stack Auth sync workflow commit...");
+      const workflowYaml = buildWorkflowYaml(selectedBranch, configPathInput.trim());
+      await createGithubWorkflowCommit(
+        owner,
+        repo,
+        selectedBranch,
+        workflowYaml,
+        commitMessage,
+        commitDescription,
+      );
+
+      appendLog("Dispatching workflow run...");
+      await triggerGithubWorkflow(owner, repo, selectedBranch);
+      appendLog("Workflow dispatched. Waiting for Stack Auth push...");
+
+      setStepWithPersistence("github-logs");
+      setIsCommitDialogOpen(false);
+    } finally {
+      setIsSettingUpGithubWorkflow(false);
+    }
+  }, [
+    appendLog,
+    commitDescription,
+    commitMessage,
+    configPathInput,
+    gitTreeTruncated,
+    createGithubWorkflowCommit,
+    generatedSecretServerKey,
+    githubFetch,
+    project,
+    selectedBranch,
+    selectedRepository,
+    setStepWithPersistence,
+    triggerGithubWorkflow,
+    upsertGitHubSecret,
+  ]);
+
+  const startGithubLogsMonitoring = useCallback(async () => {
+    await refreshSourceStatus();
+    await pollForLinkedSource({
+      repositoryFullName: selectedRepositoryFullName,
+      branch: selectedBranch,
+    });
+  }, [pollForLinkedSource, refreshSourceStatus, selectedBranch, selectedRepositoryFullName]);
+
+  const startLocalPushMonitoring = useCallback(async () => {
+    const startedRunId = localMonitoringRunIdRef.current + 1;
+    localMonitoringRunIdRef.current = startedRunId;
+    setIsAwaitingLocalPush(true);
+    try {
+      while (true) {
+        if (localMonitoringRunIdRef.current !== startedRunId) {
+          return;
+        }
+        const source = await project.getPushedConfigSource();
+        setPushedConfigSource(source);
+        if (source.type !== "unlinked") {
+          setIsAwaitingLocalPush(false);
+          try {
+            await project.getConfig();
+          } catch (error) {
+            captureError("link-existing-refresh-config-cache", {
+              projectId: project.id,
+              context: "local-cli",
+              cause: error,
+            });
+          }
+          await onContinueAfterLink();
+          return;
+        }
+        await wait(1000);
+      }
+    } finally {
+      if (localMonitoringRunIdRef.current === startedRunId) {
+        setIsAwaitingLocalPush(false);
+      }
+    }
+  }, [onContinueAfterLink, project]);
+
+  const githubWorkflowLinks = useMemo(() => {
+    if (selectedRepositoryFullName.length === 0) {
+      return null;
+    }
+    try {
+      const { owner, repo } = parseRepositoryFullName(selectedRepositoryFullName);
+      const workflowPageUrl = latestWorkflowRunUrl
+        ?? urlString`https://github.com/${owner}/${repo}/actions/workflows/${WORKFLOW_FILE_NAME}`;
+      const workflowFileUrl = selectedBranch.length > 0
+        ? `https://github.com/${owner}/${repo}/blob/${encodeURIComponent(selectedBranch)}/${WORKFLOW_FILE_PATH}`
+        : null;
+      return {
+        workflowPageUrl,
+        workflowFileUrl,
+      };
+    } catch {
+      return null;
+    }
+  }, [latestWorkflowRunUrl, selectedBranch, selectedRepositoryFullName]);
+
+  const canContinue = pushedConfigSource != null && pushedConfigSource.type !== "unlinked";
+
+  const localCommand = useMemo(() => {
+    return deindent`
+      pnpx @stackframe/stack-cli@latest login
+      pnpx @stackframe/stack-cli@latest config push --config-file <path-to-your-config-file> --project-id "${project.id}"
+    `;
+  }, [project.id]);
+
+  let title = "Link an existing config";
+  let subtitle = "Connect GitHub automation or push your local stack.config file.";
+  let content: React.ReactNode;
+  let primaryAction: React.ReactNode;
+  let secondaryAction: React.ReactNode | undefined;
+
+  if (step === "choose-method") {
+    content = (
+      <div className="grid gap-4 sm:grid-cols-2">
+        <button
+          type="button"
+          onClick={() => {
+            setStepWithPersistence("local");
+          }}
+          className="relative flex flex-col items-center gap-6 rounded-2xl bg-white/60 p-8 text-center ring-1 ring-black/[0.06] transition-[box-shadow,background-color] duration-150 hover:transition-none hover:ring-black/[0.10] dark:bg-background/60 dark:ring-white/[0.08] dark:hover:ring-white/[0.12]"
+        >
+          <div className="rounded-xl bg-foreground/[0.06] p-4 text-muted-foreground">
+            <TerminalWindowIcon className="h-7 w-7" />
+          </div>
+          <div className="space-y-1.5">
+            <Typography className="text-base font-semibold">Local / Manual Push</Typography>
+            <Typography variant="secondary" className="text-sm leading-relaxed">
+              Push your existing config from the CLI.
+            </Typography>
+          </div>
+        </button>
+
+        <button
+          type="button"
+          onClick={() => {
+            runAsynchronouslyWithAlert(async () => {
+              await openGithubRepositoryStep({ forceConnect: true });
+            });
+          }}
+          className="relative flex flex-col items-center gap-6 rounded-2xl bg-white/60 p-8 text-center ring-1 ring-black/[0.06] transition-[box-shadow,background-color] duration-150 hover:transition-none hover:ring-black/[0.10] dark:bg-background/60 dark:ring-white/[0.08] dark:hover:ring-white/[0.12]"
+        >
+          <div className="rounded-xl bg-foreground/[0.06] p-4 text-muted-foreground">
+            <GithubLogoIcon className="h-7 w-7" />
+          </div>
+          <div className="space-y-1.5">
+            <Typography className="text-base font-semibold">Connect with GitHub</Typography>
+            <Typography variant="secondary" className="text-sm leading-relaxed">
+              Configure an automated workflow for stack.config pushes.
+            </Typography>
+          </div>
+        </button>
+      </div>
+    );
+
+    primaryAction = (
+      <DesignButton variant="outline" className="w-full rounded-full" onClick={props.onBack}>
+        Go Back
+      </DesignButton>
+    );
+  } else if (step === "local") {
+    title = "Link from local CLI";
+    subtitle = "Push your local config file to link this project.";
+
+    content = (
+      <div className="space-y-4">
+        <DesignCard glassmorphic className="border-0 bg-white/70 dark:bg-background/60">
+          <div className="space-y-3">
+            <Typography className="text-sm font-semibold">CLI command</Typography>
+            <pre className="overflow-x-auto rounded-xl bg-foreground/[0.04] p-3 text-xs leading-relaxed text-foreground">
+              {localCommand}
+            </pre>
+            <Typography variant="secondary" className="text-xs leading-relaxed">
+              This signs in to Stack Auth, then pushes your local config file for project <code>{project.id}</code>.
+            </Typography>
+          </div>
+        </DesignCard>
+
+        <DesignCard glassmorphic className="border-0 bg-white/70 dark:bg-background/60">
+          <div className="flex items-center gap-2">
+            <Spinner size={16} />
+            <Typography variant="secondary" className="text-sm">
+              Awaiting config...
+            </Typography>
+          </div>
+        </DesignCard>
+      </div>
+    );
+
+    primaryAction = (
+      <DesignButton
+        className="w-full rounded-full"
+        loading={isAwaitingLocalPush}
+        disabled
+      >
+        Awaiting Push
+      </DesignButton>
+    );
+
+    secondaryAction = (
+      <DesignButton variant="outline" className="rounded-full px-6" onClick={() => setStepWithPersistence("choose-method")}>
+        Back
+      </DesignButton>
+    );
+  } else if (step === "github-repository") {
+    title = "Choose repository and branch";
+    subtitle = "Connect your GitHub account, then choose where the workflow should run.";
+
+    const repoOptions = repositories.map((repository) => ({
+      value: repository.fullName,
+      label: repository.isPrivate ? `${repository.fullName} (private)` : repository.fullName,
+    }));
+    const branchOptions = branches.map((branch) => ({
+      value: branch,
+      label: branch,
+    }));
+
+    content = (
+      <div className="space-y-4">
+        <DesignCard glassmorphic className="border-0 bg-white/70 dark:bg-background/60">
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Typography className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                Connected GitHub account
+              </Typography>
+              {githubAccounts.length === 0 ? (
+                <DesignAlert
+                  variant="info"
+                  description="No connected GitHub account found. Connect one to continue."
+                  glassmorphic
+                />
+              ) : (
+                <DesignSelectorDropdown
+                  value={selectedGithubAccount?.providerAccountId ?? ""}
+                  onValueChange={(value) => runAsynchronouslyWithAlert(async () => {
+                    if (value === CONNECT_NEW_GITHUB_ACCOUNT_OPTION) {
+                      await user.getOrLinkConnectedAccount("github", { scopes: GITHUB_SCOPE_REQUIREMENTS });
+                      await loadRepositories();
+                      return;
+                    }
+
+                    const account = githubAccounts.find((entry) => entry.providerAccountId === value) ?? null;
+                    if (account == null) {
+                      throw new Error("Selected GitHub account not found.");
+                    }
+
+                    setSelectedGithubAccountIdWithPersistence(value);
+                    await loadRepositories({ accountOverride: account });
+                  })}
+                  options={[
+                    {
+                      value: CONNECT_NEW_GITHUB_ACCOUNT_OPTION,
+                      label: "Connect new",
+                    },
+                    ...githubAccounts.map((account) => ({
+                      value: account.providerAccountId,
+                      label: githubAccountLogins.get(account.providerAccountId) ?? account.providerAccountId,
+                    })),
+                  ]}
+                  size="md"
+                />
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Typography className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Repository</Typography>
+              <DesignSelectorDropdown
+                value={selectedRepositoryFullName}
+                onValueChange={(nextRepository) => runAsynchronouslyWithAlert(async () => {
+                  setSelectedRepositoryFullNameWithPersistence(nextRepository);
+                  setBranches([]);
+                  setSelectedBranchWithPersistence("");
+                  setConfigPathSuggestions([]);
+                  setGitTreeTruncated(false);
+                  if (nextRepository.length > 0) {
+                    await loadBranches(nextRepository);
+                  }
+                })}
+                options={repoOptions}
+                placeholder={loadingRepositories ? "Loading repositories..." : "Select a repository"}
+                size="md"
+                disabled={repositories.length === 0}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Typography className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Branch</Typography>
+              <div className="flex gap-2">
+                <DesignSelectorDropdown
+                  value={selectedBranch}
+                  onValueChange={setSelectedBranchWithPersistence}
+                  options={branchOptions}
+                  placeholder={loadingBranches ? "Loading branches..." : "Select a branch"}
+                  size="md"
+                  disabled={branches.length === 0}
+                  className="flex-1"
+                />
+                <DesignButton
+                  variant="outline"
+                  loading={loadingBranches}
+                  disabled={selectedRepositoryFullName.length === 0}
+                  onClick={() => runAsynchronouslyWithAlert(async () => {
+                    await loadBranches(selectedRepositoryFullName);
+                  })}
+                >
+                  Refresh
+                </DesignButton>
+              </div>
+            </div>
+          </div>
+        </DesignCard>
+      </div>
+    );
+
+    primaryAction = (
+      <DesignButton
+        className="w-full rounded-full"
+        disabled={selectedRepositoryFullName.length === 0 || selectedBranch.length === 0}
+        onClick={() => runAsynchronouslyWithAlert(async () => {
+          const repository = selectedRepository;
+          if (repository == null) {
+            throw new Error("Select a repository before continuing.");
+          }
+          const branchToUse = branches.length === 0
+            ? await loadBranches(repository.fullName)
+            : selectedBranch;
+          if (branchToUse.length === 0) {
+            throw new Error("Pick a branch, or refresh branches and try again.");
+          }
+          setStepWithPersistence("github-config-path");
+          await loadConfigSuggestions({ repository, branch: branchToUse });
+        })}
+      >
+        Continue
+      </DesignButton>
+    );
+
+    secondaryAction = (
+      <DesignButton variant="outline" className="rounded-full px-6" onClick={() => setStepWithPersistence("choose-method")}>
+        Back
+      </DesignButton>
+    );
+  } else if (step === "github-config-path") {
+    title = "Select config file";
+    subtitle = "Choose the path to the config file of your Stack Auth project";
+
+    content = (
+      <div className="space-y-4">
+        {gitTreeTruncated && (
+          <DesignAlert
+            variant="warning"
+            title="Repository tree was truncated"
+            description="GitHub returned a partial file list. Suggestions may miss stack.config files—type the path manually or retry after reducing repo size."
+            glassmorphic
+          />
+        )}
+        <DesignCard glassmorphic className="border-0 bg-white/70 dark:bg-background/60">
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Typography className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                Config path
+              </Typography>
+              <DesignInput
+                value={configPathInput}
+                onChange={(event) => setConfigPathInputWithPersistence(event.target.value)}
+                placeholder="stack.config.ts"
+              />
+              {configPathSuggestions.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {configPathSuggestions.map((suggestion) => (
+                    <button
+                      key={suggestion}
+                      type="button"
+                      onClick={() => setConfigPathInputWithPersistence(suggestion)}
+                      className={cn(
+                        "rounded-full px-3 py-1 text-xs ring-1 transition-colors duration-150 hover:transition-none",
+                        suggestion === configPathInput
+                          ? "bg-blue-500/12 text-blue-600 ring-blue-500/30 dark:text-blue-300"
+                          : "bg-background/60 text-muted-foreground ring-border",
+                      )}
+                    >
+                      {suggestion}
+                    </button>
+                  ))}
+                </div>
+              )}
+              <Typography variant="secondary" className="text-xs leading-relaxed">
+                The path to your stack.config.ts file. If you don&apos;t have one yet,{" "}
+                <button
+                  type="button"
+                  onClick={props.onBack}
+                  className="underline decoration-dotted underline-offset-4 transition-colors duration-150 hover:transition-none hover:text-foreground"
+                >
+                  create a new project
+                </button>{" "}
+                instead.
+              </Typography>
+            </div>
+          </div>
+        </DesignCard>
+      </div>
+    );
+
+    primaryAction = (
+      <DesignButton
+        className="w-full rounded-full"
+        disabled={configPathInput.trim().length === 0}
+        onClick={() => setIsCommitDialogOpen(true)}
+      >
+        Create GitHub Action
+      </DesignButton>
+    );
+
+    secondaryAction = (
+      <DesignButton
+        variant="outline"
+        className="rounded-full px-6"
+        onClick={() => runAsynchronouslyWithAlert(async () => {
+          await openGithubRepositoryStep();
+        })}
+      >
+        Back
+      </DesignButton>
+    );
+  } else {
+    title = "Waiting for config push";
+    subtitle = "Once the workflow push completes you'll be able to continue.";
+
+    content = (
+      <div className="space-y-4">
+        {gitTreeTruncated && (
+          <DesignAlert
+            variant="info"
+            title="Earlier suggestion pass was partial"
+            description="Config path suggestions may have been incomplete due to GitHub tree truncation. If the workflow fails, verify the committed config path in the repository."
+            glassmorphic
+          />
+        )}
+        <DesignCard glassmorphic className="border-0 bg-white/70 dark:bg-background/60">
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              {isCheckingSource ? <Spinner size={16} /> : <LinkBreakIcon className="h-4 w-4 text-muted-foreground" />}
+              <Typography className="text-sm font-medium">
+                {isCheckingSource ? "Checking push status..." : "Waiting for config push"}
+              </Typography>
+            </div>
+            {githubWorkflowLinks != null && (
+              <div className="flex flex-wrap gap-3 text-xs">
+                <a
+                  href={githubWorkflowLinks.workflowPageUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="underline decoration-dotted underline-offset-4 transition-colors duration-150 hover:transition-none hover:text-foreground"
+                >
+                  Go to workflow
+                </a>
+                {githubWorkflowLinks.workflowFileUrl != null && (
+                  <a
+                    href={githubWorkflowLinks.workflowFileUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="underline decoration-dotted underline-offset-4 transition-colors duration-150 hover:transition-none hover:text-foreground"
+                  >
+                    Open workflow file
+                  </a>
+                )}
+              </div>
+            )}
+            <Typography variant="secondary" className="text-xs">
+              Current source: {getSourceLabel(pushedConfigSource)}
+            </Typography>
+            <div className="max-h-48 overflow-y-auto rounded-xl bg-foreground/[0.04] p-3 text-xs font-mono text-muted-foreground">
+              {logs.length > 0 ? logs.map((entry, index) => (
+                <div key={`${entry}-${index}`}>{entry}</div>
+              )) : <div>No logs yet.</div>}
+            </div>
+          </div>
+        </DesignCard>
+
+        {!canContinue && (
+          <DesignAlert
+            variant="info"
+            description="Continue unlocks automatically as soon as branch config source is linked."
+            glassmorphic
+          />
+        )}
+        {workflowFailure != null && (
+          <DesignAlert
+            variant="error"
+            title="Workflow failed"
+            description={`The latest workflow run did not succeed (${workflowFailure.conclusion ?? "unknown"}). Fix the workflow on GitHub and this page will continue monitoring automatically.`}
+            glassmorphic
+          />
+        )}
+      </div>
+    );
+
+    primaryAction = canContinue ? (
+      <DesignButton
+        className="w-full rounded-full"
+        onClick={() => runAsynchronouslyWithAlert(props.onContinueAfterLink)}
+      >
+        Continue
+      </DesignButton>
+    ) : (
+      null
+    );
+
+    secondaryAction = (
+      <div className="flex items-center gap-3">
+        {workflowFailure != null && githubWorkflowLinks != null && (
+          <DesignButton
+            variant="secondary"
+            className="rounded-full px-6"
+            onClick={() => {
+              const detailsUrl = workflowFailure.runUrl ?? githubWorkflowLinks.workflowPageUrl;
+              window.open(detailsUrl, "_blank", "noopener,noreferrer");
+            }}
+          >
+            Fix on GitHub
+          </DesignButton>
+        )}
+        <DesignButton variant="outline" className="rounded-full px-6" onClick={() => setStepWithPersistence("github-config-path")}>
+          Back
+        </DesignButton>
+      </div>
+    );
+  }
+
+  if (step === "local") {
+    const localMonitoringKey = project.id;
+    if (localAutoMonitoringKeyRef.current !== localMonitoringKey) {
+      localAutoMonitoringKeyRef.current = localMonitoringKey;
+      runAsynchronouslyWithAlert(startLocalPushMonitoring);
+    }
+  } else if (localAutoMonitoringKeyRef.current !== null) {
+    localAutoMonitoringKeyRef.current = null;
+  }
+
+  if (step === "github-logs") {
+    const nextAutoPollingKey = `${selectedRepositoryFullName}:${selectedBranch}`;
+    if (githubLogsAutoPollingKeyRef.current !== nextAutoPollingKey) {
+      githubLogsAutoPollingKeyRef.current = nextAutoPollingKey;
+      runAsynchronouslyWithAlert(startGithubLogsMonitoring);
+    }
+  } else if (githubLogsAutoPollingKeyRef.current !== null) {
+    githubLogsAutoPollingKeyRef.current = null;
+  }
+
+  return (
+    <>
+      <OnboardingPage
+        stepKey={`config-choice-link-existing-${step}`}
+        title={title}
+        subtitle={subtitle}
+        steps={props.steps}
+        currentStep={props.currentStep}
+        onStepClick={props.onStepClick}
+        disabled={props.disabled || isSettingUpGithubWorkflow}
+        primaryAction={primaryAction}
+        secondaryAction={secondaryAction}
+      >
+        {content}
+      </OnboardingPage>
+
+      <ActionDialog
+        open={isCommitDialogOpen}
+        onClose={() => setIsCommitDialogOpen(false)}
+        preventClose={isSettingUpGithubWorkflow}
+        title="Create workflow commit"
+        description="Review the commit content used to add the Stack Auth sync workflow."
+        okButton={{
+          label: "Commit and run workflow",
+          onClick: async () => {
+            await setupGithubWorkflow();
+          },
+        }}
+        cancelButton
+      >
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Typography className="text-sm font-medium">Commit message</Typography>
+            <DesignInput
+              value={commitMessage}
+              onChange={(event) => setCommitMessage(event.target.value)}
+              placeholder="chore(stack-auth): add Stack Auth config sync workflow"
+            />
+          </div>
+          <div className="space-y-2">
+            <Typography className="text-sm font-medium">Commit description</Typography>
+            <textarea
+              value={commitDescription}
+              onChange={(event) => setCommitDescription(event.target.value)}
+              className="min-h-[88px] w-full rounded-xl border border-border bg-background px-3 py-2 text-sm text-foreground outline-none ring-offset-background transition-colors duration-150 placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring hover:transition-none"
+              placeholder="Add workflow and actions secrets for Stack Auth config push."
+            />
+          </div>
+          <Typography variant="secondary" className="text-xs">
+            This creates or updates `{WORKFLOW_FILE_PATH}` and dispatches the workflow on `{selectedBranch}`.
+          </Typography>
+        </div>
+      </ActionDialog>
+    </>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.test.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.test.tsx
new file mode 100644
index 0000000000..aa55dd95cc
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.test.tsx
@@ -0,0 +1,198 @@
+// @vitest-environment jsdom
+
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render, waitFor } from "@testing-library/react";
+
+vi.mock("@/components/design-components", () => ({
+  DesignCard: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  DesignPillToggle: () => <div />,
+}));
+
+vi.mock("@/components/design-components/alert", () => ({
+  DesignAlert: ({ title, description }: { title: string, description: string }) => (
+    <div>
+      <div>{title}</div>
+      <div>{description}</div>
+    </div>
+  ),
+}));
+
+vi.mock("@/components/design-components/button", () => ({
+  DesignButton: ({
+    children,
+    type,
+    loading: _loading,
+    variant: _variant,
+    ...props
+  }: ButtonHTMLAttributes<HTMLButtonElement> & { loading?: boolean, variant?: string }) => (
+    <button type={type ?? "button"} {...props}>{children}</button>
+  ),
+}));
+
+vi.mock("@/components/design-components/select", () => ({
+  DesignSelectorDropdown: ({
+    value,
+    onValueChange,
+    options,
+  }: {
+    value: string,
+    onValueChange: (value: string) => void,
+    options: Array<{ value: string, label: string }>,
+  }) => (
+    <select
+      aria-label="selector"
+      value={value}
+      onChange={(event) => onValueChange(event.target.value)}
+    >
+      {options.map((option) => (
+        <option key={option.value} value={option.value}>{option.label}</option>
+      ))}
+    </select>
+  ),
+}));
+
+vi.mock("@/components/router", () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+  }),
+}));
+
+vi.mock("@/components/stripe-wordmark", () => ({
+  StripeWordmark: () => <div>Stripe</div>,
+}));
+
+vi.mock("@/components/ui", () => ({
+  Alert: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  AlertDescription: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  AlertTitle: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  BrowserFrame: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  Button: ({ children, type, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => (
+    <button type={type ?? "button"} {...props}>{children}</button>
+  ),
+  Switch: () => <button type="button">switch</button>,
+  TooltipProvider: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  Typography: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  cn: (...classNames: Array<string | false | null | undefined>) => classNames.filter(Boolean).join(" "),
+}));
+
+vi.mock("@/lib/config-update", () => ({
+  useUpdateConfig: () => vi.fn(async () => true),
+}));
+
+vi.mock("@stackframe/stack", () => ({
+  AdminOwnedProject: class {},
+  AuthPage: () => <div>Auth preview</div>,
+}));
+
+vi.mock("@stackframe/stack-shared/dist/utils/oauth", () => ({
+  allProviders: [],
+}));
+
+vi.mock("@stackframe/stack-shared/dist/utils/promises", () => ({
+  runAsynchronouslyWithAlert: (fn: () => Promise<unknown>) => fn(),
+}));
+
+vi.mock("./components", () => ({
+  DomainSetupTransitionState: () => <div>Domain setup transition</div>,
+  ModeNotImplementedCard: () => <div>Mode not implemented</div>,
+  OnboardingAppCard: () => <div>App card</div>,
+  OnboardingEmailThemePreview: () => <div>Email theme preview</div>,
+  OnboardingPage: ({
+    title,
+    subtitle,
+    children,
+    primaryAction,
+    secondaryAction,
+  }: {
+    title: string,
+    subtitle?: string,
+    children: ReactNode,
+    primaryAction: ReactNode,
+    secondaryAction?: ReactNode,
+  }) => (
+    <div>
+      <h1>{title}</h1>
+      {subtitle != null && <p>{subtitle}</p>}
+      <div>{children}</div>
+      <div>{primaryAction}</div>
+      <div>{secondaryAction}</div>
+    </div>
+  ),
+  WelcomeSlide: ({ onFinish }: { onFinish: () => void }) => (
+    <div>
+      <h1>Welcome to Stack Auth</h1>
+      <button type="button" onClick={onFinish}>Get Started</button>
+    </div>
+  ),
+}));
+
+vi.mock("./link-existing-onboarding", () => ({
+  LinkExistingOnboarding: () => <div>Link existing onboarding</div>,
+}));
+
+import { ProjectOnboardingWizard } from "./project-onboarding-wizard";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("ProjectOnboardingWizard", () => {
+  it("completes onboarding automatically after Stripe setup returns successfully", async () => {
+    const setStatus = vi.fn(async () => {});
+    const onComplete = vi.fn();
+
+    const project = {
+      id: "proj_123",
+      config: {
+        credentialEnabled: true,
+        magicLinkEnabled: false,
+        passkeyEnabled: false,
+        oauthProviders: [],
+      },
+      useConfig: () => ({
+        apps: {
+          installed: {
+            authentication: { enabled: true },
+            emails: { enabled: true },
+            payments: { enabled: true },
+          },
+        },
+        domains: {
+          trustedDomains: {},
+        },
+        emails: {
+          selectedThemeId: "default",
+          server: {},
+        },
+      }),
+      app: {
+        setupPayments: vi.fn(async () => ({ url: "https://example.com" })),
+        useEmailThemes: () => [],
+        useStripeAccountInfo: () => ({
+          account_id: "acct_123",
+          charges_enabled: true,
+          details_submitted: true,
+          payouts_enabled: true,
+        }),
+      },
+    };
+
+    render(
+      <ProjectOnboardingWizard
+        project={project as never}
+        status="payments_setup"
+        mode={null}
+        setMode={vi.fn()}
+        setStatus={setStatus}
+        onComplete={onComplete}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(setStatus).toHaveBeenCalledWith("welcome");
+    });
+    expect(onComplete).not.toHaveBeenCalled();
+  });
+});
diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.tsx
new file mode 100644
index 0000000000..3baca08a41
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.tsx
@@ -0,0 +1,874 @@
+"use client";
+
+import { DesignCard, DesignPillToggle } from "@/components/design-components";
+import { DesignAlert } from "@/components/design-components/alert";
+import { DesignButton } from "@/components/design-components/button";
+import { DesignSelectorDropdown } from "@/components/design-components/select";
+import { useRouter } from "@/components/router";
+import { StripeWordmark } from "@/components/stripe-wordmark";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  BrowserFrame,
+  Button,
+  cn,
+  Switch,
+  TooltipProvider,
+  Typography,
+} from "@/components/ui";
+import { useUpdateConfig } from "@/lib/config-update";
+import {
+  ArrowsClockwiseIcon,
+  ChartBarIcon,
+  CheckCircleIcon,
+  LinkBreakIcon,
+  ShieldCheckIcon,
+  SparkleIcon,
+  WarningCircleIcon,
+  WebhooksLogoIcon,
+} from "@phosphor-icons/react";
+import { AdminOwnedProject, AuthPage } from "@stackframe/stack";
+import { type AppId } from "@stackframe/stack-shared/dist/apps/apps-config";
+import { projectOnboardingStatusValues, type ProjectOnboardingStatus } from "@stackframe/stack-shared/dist/schema-fields";
+import { allProviders } from "@stackframe/stack-shared/dist/utils/oauth";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import {
+  DomainSetupTransitionState,
+  OnboardingAppCard,
+  OnboardingEmailThemePreview,
+  OnboardingPage,
+  WelcomeSlide,
+} from "./components";
+import {
+  ALL_APP_IDS,
+  buildLinkExistingTimeline,
+  buildTimeline,
+  deriveInitialApps,
+  deriveInitialSignInMethods,
+  getStepIndex,
+  orderedAppIds,
+  PAYMENT_COUNTRY_OPTIONS,
+  PRIMARY_APP_IDS,
+  REQUIRED_APP_IDS,
+  SIGN_IN_METHODS,
+  type SignInMethod,
+} from "./shared";
+import { LinkExistingOnboarding } from "./link-existing-onboarding";
+
+const PROJECT_ONBOARDING_STATUSES = projectOnboardingStatusValues;
+
+export function ProjectOnboardingWizard(props: {
+  project: AdminOwnedProject,
+  status: ProjectOnboardingStatus,
+  mode: string | null,
+  setMode: (mode: string | null) => void,
+  setStatus: (status: ProjectOnboardingStatus) => Promise<void>,
+  onComplete: () => void,
+}) {
+  const router = useRouter();
+  const { project, status, setMode, setStatus, onComplete } = props;
+  const completeConfig = project.useConfig();
+  const updateConfig = useUpdateConfig();
+  const setProjectOnboardingStatus = setStatus;
+  const finishProjectOnboarding = onComplete;
+  const [saving, setSaving] = useState(false);
+  const [selectedApps, setSelectedApps] = useState<Set<AppId>>(() => deriveInitialApps(completeConfig, status));
+  const [signInMethods, setSignInMethods] = useState<Set<SignInMethod>>(() => deriveInitialSignInMethods(project, status));
+  const [trustedDomain, setTrustedDomain] = useState("");
+  const [domainHandlerPath, setDomainHandlerPath] = useState("/handler");
+  const [managedSubdomain, setManagedSubdomain] = useState("");
+  const [managedSenderLocalPart, setManagedSenderLocalPart] = useState("");
+  const [managedDomainSetupStatus, setManagedDomainSetupStatus] = useState<string | null>(null);
+  const [selectedEmailThemeId, setSelectedEmailThemeId] = useState(completeConfig.emails.selectedThemeId);
+  const [selectedPaymentsCountry, setSelectedPaymentsCountry] = useState("US");
+  const [selectedConfigChoice, setSelectedConfigChoice] = useState<"create-new" | "link-existing">("create-new");
+  const [authSetupMobileTab, setAuthSetupMobileTab] = useState<"methods" | "preview">("methods");
+  const [domainSetupAutoAdvanceError, setDomainSetupAutoAdvanceError] = useState<string | null>(null);
+  const [domainSetupAutoAdvancing, setDomainSetupAutoAdvancing] = useState(false);
+  const previousProjectId = useRef<string | null>(null);
+  const paymentsAutoCompletingRef = useRef(false);
+  const stripeAccountInfo = props.project.app.useStripeAccountInfo();
+
+  const runWithSaving = useCallback(async (fn: () => Promise<void>) => {
+    setSaving(true);
+    try {
+      await fn();
+    } finally {
+      setSaving(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (previousProjectId.current === project.id) {
+      return;
+    }
+    previousProjectId.current = project.id;
+
+    setSelectedApps(deriveInitialApps(completeConfig, status));
+    setSignInMethods(deriveInitialSignInMethods(project, status));
+
+    const trustedDomains = Object.values(completeConfig.domains.trustedDomains)
+      .filter((entry) => entry.baseUrl != null)
+      .map((entry) => ({ baseUrl: entry.baseUrl, handlerPath: entry.handlerPath }));
+
+    if (trustedDomains[0]) {
+      const trustedDomainEntry = trustedDomains[0];
+      if (trustedDomainEntry.baseUrl == null) {
+        throw new Error("Invariant violated: trusted domain entry is missing a baseUrl.");
+      }
+      setTrustedDomain(trustedDomainEntry.baseUrl);
+      setDomainHandlerPath(trustedDomainEntry.handlerPath);
+    } else {
+      setTrustedDomain("");
+      setDomainHandlerPath("/handler");
+    }
+
+    const serverConfig = completeConfig.emails.server;
+    setManagedSubdomain(serverConfig.managedSubdomain ?? "");
+    setManagedSenderLocalPart(serverConfig.managedSenderLocalPart ?? "");
+    setSelectedEmailThemeId(completeConfig.emails.selectedThemeId);
+    setManagedDomainSetupStatus(null);
+    setSelectedConfigChoice("create-new");
+    setAuthSetupMobileTab("methods");
+    setDomainSetupAutoAdvanceError(null);
+    setDomainSetupAutoAdvancing(false);
+    paymentsAutoCompletingRef.current = false;
+  }, [completeConfig, project, project.id, status]);
+
+  const emailThemes = project.app.useEmailThemes();
+  const isLinkExistingMode = props.mode === "link-existing";
+  const paymentsAppEnabledInConfig = completeConfig.apps.installed.payments?.enabled === true;
+  const includePayments = (
+    status === "payments_setup"
+    || paymentsAppEnabledInConfig
+    || (!isLinkExistingMode && selectedApps.has("payments"))
+  );
+  const timelineSteps = useMemo(
+    () => isLinkExistingMode ? buildLinkExistingTimeline(includePayments) : buildTimeline(includePayments),
+    [includePayments, isLinkExistingMode],
+  );
+  const currentTimelineIndex = useMemo(() => getStepIndex(timelineSteps, status), [status, timelineSteps]);
+
+  const handleTimelineStepClick = useCallback((step: ProjectOnboardingStatus) => {
+    const targetIndex = getStepIndex(timelineSteps, step);
+    if (targetIndex < 0 || targetIndex >= currentTimelineIndex) {
+      return;
+    }
+
+    runAsynchronouslyWithAlert(async () => {
+      if (step === "config_choice" && props.mode !== "link-existing") {
+        setMode(null);
+      }
+      await setStatus(step);
+    });
+  }, [currentTimelineIndex, props.mode, setMode, setStatus, timelineSteps]);
+
+  const advanceFromDomainSetup = useCallback(() => {
+    return runAsynchronouslyWithAlert(async () => {
+      setDomainSetupAutoAdvanceError(null);
+      setDomainSetupAutoAdvancing(true);
+      try {
+        await setStatus("email_theme_setup");
+      } catch (error) {
+        setDomainSetupAutoAdvanceError(error instanceof Error ? error.message : "Failed to continue to the email theme step.");
+        throw error;
+      } finally {
+        setDomainSetupAutoAdvancing(false);
+      }
+    });
+  }, [setStatus]);
+
+  useEffect(() => {
+    if (status !== "domain_setup") {
+      return;
+    }
+
+    advanceFromDomainSetup();
+  }, [advanceFromDomainSetup, status]);
+
+  const authPreviewProject = useMemo(() => {
+    return {
+      id: project.id,
+      config: {
+        signUpEnabled: true,
+        credentialEnabled: signInMethods.has("credential"),
+        magicLinkEnabled: signInMethods.has("magicLink"),
+        passkeyEnabled: signInMethods.has("passkey"),
+        oauthProviders: (allProviders as readonly string[])
+          .filter((providerId) => signInMethods.has(providerId as SignInMethod))
+          .map((providerId) => ({ id: providerId, type: "shared" as const })),
+      },
+    };
+  }, [project.id, signInMethods]);
+
+  const toggleSignInMethod = (method: SignInMethod, enabled: boolean) => {
+    setSignInMethods((previous) => {
+      const next = new Set(previous);
+      if (enabled) {
+        next.add(method);
+      } else {
+        next.delete(method);
+      }
+      return next;
+    });
+  };
+
+  const toggleApp = (appId: AppId) => {
+    setSelectedApps((previous) => {
+      const next = new Set(previous);
+      if (REQUIRED_APP_IDS.includes(appId)) {
+        next.add(appId);
+        return next;
+      }
+
+      if (next.has(appId)) {
+        next.delete(appId);
+      } else {
+        next.add(appId);
+      }
+      return next;
+    });
+  };
+
+  const finalizeOnboarding = useCallback(async () => {
+    await runWithSaving(async () => {
+      await setProjectOnboardingStatus("completed");
+      finishProjectOnboarding();
+    });
+  }, [finishProjectOnboarding, runWithSaving, setProjectOnboardingStatus]);
+
+  useEffect(() => {
+    if (status !== "payments_setup" || stripeAccountInfo?.details_submitted !== true || paymentsAutoCompletingRef.current) {
+      return;
+    }
+
+    paymentsAutoCompletingRef.current = true;
+    runAsynchronouslyWithAlert(async () => {
+      try {
+        await setStatus("welcome");
+      } catch (error) {
+        paymentsAutoCompletingRef.current = false;
+        throw error;
+      }
+    });
+  }, [setStatus, status, stripeAccountInfo?.details_submitted]);
+
+  if (props.status === "welcome") {
+    return (
+      <WelcomeSlide
+        steps={timelineSteps}
+        saving={saving}
+        enabledApps={completeConfig.apps.installed}
+        onFinish={() => runAsynchronouslyWithAlert(finalizeOnboarding)}
+      />
+    );
+  }
+
+  if (props.status === "config_choice" && props.mode === "link-existing") {
+    return (
+      <LinkExistingOnboarding
+        project={props.project}
+        steps={timelineSteps}
+        disabled={saving}
+        currentStep="config_choice"
+        onStepClick={handleTimelineStepClick}
+        onBack={() => {
+          props.setMode(null);
+          setSelectedConfigChoice("create-new");
+        }}
+        onContinueAfterLink={async () => {
+          const latestConfig = await props.project.getConfig();
+          const paymentsEnabledInLatestConfig = latestConfig.apps.installed.payments?.enabled === true;
+          if (paymentsEnabledInLatestConfig) {
+            await props.setStatus("payments_setup");
+          } else {
+            await props.setStatus("welcome");
+          }
+        }}
+      />
+    );
+  }
+
+  if (props.status === "config_choice") {
+    const createNewSelected = selectedConfigChoice === "create-new";
+    const linkExistingSelected = selectedConfigChoice === "link-existing";
+
+    return (
+      <OnboardingPage
+        stepKey="config-choice"
+        title="Choose how you want to start"
+        subtitle="Start fresh or link an existing config."
+        steps={timelineSteps}
+        currentStep="config_choice"
+        onStepClick={handleTimelineStepClick}
+        disabled={saving}
+        primaryAction={
+          <DesignButton
+            className="w-full rounded-full"
+            loading={saving}
+            onClick={() => runAsynchronouslyWithAlert(() => runWithSaving(async () => {
+              if (selectedConfigChoice === "create-new") {
+                await props.setStatus("apps_selection");
+              } else {
+                props.setMode("link-existing");
+              }
+            }))}
+          >
+            Continue
+          </DesignButton>
+        }
+      >
+        <div className="grid gap-4 sm:grid-cols-2">
+          <button
+            type="button"
+            disabled={saving}
+            onClick={() => setSelectedConfigChoice("create-new")}
+            className={cn(
+              "relative flex flex-col items-center gap-6 rounded-2xl p-10 text-center transition-[box-shadow,background-color] duration-150 hover:transition-none",
+              createNewSelected
+                ? "bg-white ring-2 ring-blue-500/50 shadow-md dark:bg-blue-500/[0.08] dark:ring-blue-500/50 dark:shadow-none"
+                : "bg-white/50 ring-1 ring-black/[0.06] hover:ring-black/[0.10] dark:bg-background/60 dark:backdrop-blur-xl dark:ring-white/[0.06] dark:hover:ring-white/[0.10]",
+            )}
+          >
+            {createNewSelected && (
+              <div className="absolute right-3 top-3 flex h-5 w-5 items-center justify-center rounded-full bg-emerald-600 text-white">
+                <CheckCircleIcon className="h-4 w-4" weight="fill" />
+              </div>
+            )}
+            <div className={cn(
+              "rounded-xl p-4",
+              createNewSelected ? "bg-blue-500/15 text-blue-500" : "bg-foreground/[0.06] text-muted-foreground",
+            )}>
+              <SparkleIcon className="h-7 w-7" />
+            </div>
+            <div className="space-y-1.5">
+              <Typography className="text-base font-semibold">Create New</Typography>
+              <Typography variant="secondary" className="text-sm leading-relaxed">Create and customize a new Stack Auth project.</Typography>
+            </div>
+          </button>
+
+          <button
+            type="button"
+            disabled={saving}
+            onClick={() => setSelectedConfigChoice("link-existing")}
+            className={cn(
+              "relative flex flex-col items-center gap-6 rounded-2xl p-10 text-center transition-[box-shadow,background-color] duration-150 hover:transition-none",
+              linkExistingSelected
+                ? "bg-white ring-2 ring-blue-500/50 shadow-md dark:bg-blue-500/[0.08] dark:ring-blue-500/50 dark:shadow-none"
+                : "bg-white/50 ring-1 ring-black/[0.06] hover:ring-black/[0.10] dark:bg-background/60 dark:backdrop-blur-xl dark:ring-white/[0.06] dark:hover:ring-white/[0.10]",
+            )}
+          >
+            {linkExistingSelected && (
+              <div className="absolute right-3 top-3 flex h-5 w-5 items-center justify-center rounded-full bg-emerald-600 text-white">
+                <CheckCircleIcon className="h-4 w-4" weight="fill" />
+              </div>
+            )}
+            <div className={cn(
+              "rounded-xl p-4",
+              linkExistingSelected ? "bg-blue-500/15 text-blue-500" : "bg-foreground/[0.06] text-muted-foreground",
+            )}>
+              <LinkBreakIcon className="h-7 w-7" />
+            </div>
+            <div className="space-y-1.5">
+              <Typography className="text-base font-semibold">Link Existing Config</Typography>
+              <Typography variant="secondary" className="text-sm leading-relaxed">If you already have a Stack Auth project locally or on GitHub, link it here.</Typography>
+            </div>
+          </button>
+        </div>
+      </OnboardingPage>
+    );
+  }
+
+  if (props.status === "apps_selection") {
+    const orderedIds = orderedAppIds();
+    const primaryAppIds = orderedIds.filter((appId) => PRIMARY_APP_IDS.includes(appId));
+    const secondaryAppIds = orderedIds.filter((appId) => !PRIMARY_APP_IDS.includes(appId));
+    const moreAppsSplitIndex = secondaryAppIds.length >= 10 ? Math.floor(secondaryAppIds.length / 2) : secondaryAppIds.length;
+    const moreAppsFirstRow = secondaryAppIds.slice(0, moreAppsSplitIndex);
+    const moreAppsSecondRow = secondaryAppIds.slice(moreAppsSplitIndex);
+
+    return (
+      <OnboardingPage
+        stepKey="apps-selection"
+        title="Select apps"
+        subtitle="Choose the apps to include in this project."
+        steps={timelineSteps}
+        currentStep="apps_selection"
+        onStepClick={handleTimelineStepClick}
+        disabled={saving}
+        wide
+        primaryAction={
+          <DesignButton
+            className="w-full rounded-full"
+            loading={saving}
+            onClick={() => runAsynchronouslyWithAlert(() => runWithSaving(async () => {
+              const appConfigUpdateEntries = new Map(
+                ALL_APP_IDS.map((appId) => [
+                  `apps.installed.${appId}.enabled`,
+                  selectedApps.has(appId),
+                ])
+              );
+
+              const configUpdated = await updateConfig({
+                adminApp: props.project.app,
+                configUpdate: Object.fromEntries(appConfigUpdateEntries),
+                pushable: true,
+              });
+              if (!configUpdated) {
+                return;
+              }
+              await props.setStatus("auth_setup");
+            }))}
+          >
+            Continue
+          </DesignButton>
+        }
+      >
+        <TooltipProvider delayDuration={0}>
+          <div className="space-y-6">
+            <div className="space-y-3">
+              <Typography className="text-center text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                Core apps
+              </Typography>
+              <div className="flex flex-wrap items-start justify-center gap-x-2 gap-y-2">
+                {primaryAppIds.map((appId) => (
+                  <OnboardingAppCard
+                    key={appId}
+                    appId={appId}
+                    selected={selectedApps.has(appId)}
+                    required={REQUIRED_APP_IDS.includes(appId)}
+                    primary
+                    disabled={saving}
+                    onToggle={() => toggleApp(appId)}
+                  />
+                ))}
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <Typography className="text-center text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                More apps
+              </Typography>
+              {secondaryAppIds.length >= 10 ? (
+                <div className="flex flex-col items-stretch gap-y-3">
+                  <div className="flex flex-wrap items-start justify-center gap-x-1 gap-y-1">
+                    {moreAppsFirstRow.map((appId) => (
+                      <OnboardingAppCard
+                        key={appId}
+                        appId={appId}
+                        selected={selectedApps.has(appId)}
+                        required={REQUIRED_APP_IDS.includes(appId)}
+                        primary={false}
+                        disabled={saving}
+                        onToggle={() => toggleApp(appId)}
+                      />
+                    ))}
+                  </div>
+                  <div className="flex flex-wrap items-start justify-center gap-x-1 gap-y-1">
+                    {moreAppsSecondRow.map((appId) => (
+                      <OnboardingAppCard
+                        key={appId}
+                        appId={appId}
+                        selected={selectedApps.has(appId)}
+                        required={REQUIRED_APP_IDS.includes(appId)}
+                        primary={false}
+                        disabled={saving}
+                        onToggle={() => toggleApp(appId)}
+                      />
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <div className="flex flex-wrap items-start justify-center gap-x-1 gap-y-1">
+                  {secondaryAppIds.map((appId) => (
+                    <OnboardingAppCard
+                      key={appId}
+                      appId={appId}
+                      selected={selectedApps.has(appId)}
+                      required={REQUIRED_APP_IDS.includes(appId)}
+                      primary={false}
+                      disabled={saving}
+                      onToggle={() => toggleApp(appId)}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </TooltipProvider>
+      </OnboardingPage>
+    );
+  }
+
+  if (props.status === "auth_setup") {
+    return (
+      <OnboardingPage
+        stepKey="auth-setup"
+        title="Configure authentication"
+        subtitle="Choose which sign-in methods to enable."
+        steps={timelineSteps}
+        currentStep="auth_setup"
+        onStepClick={handleTimelineStepClick}
+        disabled={saving}
+        wide
+        primaryAction={
+          <DesignButton
+            className="w-full rounded-full"
+            loading={saving}
+            onClick={() => runAsynchronouslyWithAlert(() => runWithSaving(async () => {
+              if (signInMethods.size === 0) {
+                throw new Error("Select at least one sign-in method before continuing.");
+              }
+
+              const authMethodsUpdated = await updateConfig({
+                adminApp: props.project.app,
+                configUpdate: {
+                  "auth.password.allowSignIn": signInMethods.has("credential"),
+                  "auth.otp.allowSignIn": signInMethods.has("magicLink"),
+                  "auth.passkey.allowSignIn": signInMethods.has("passkey"),
+                },
+                pushable: true,
+              });
+
+              if (!authMethodsUpdated) {
+                return;
+              }
+
+              const providersUpdated = await updateConfig({
+                adminApp: props.project.app,
+                configUpdate: {
+                  "auth.oauth.providers.google": signInMethods.has("google") ? {
+                    type: "google",
+                    isShared: true,
+                    allowSignIn: true,
+                    allowConnectedAccounts: true,
+                  } : null,
+                  "auth.oauth.providers.github": signInMethods.has("github") ? {
+                    type: "github",
+                    isShared: true,
+                    allowSignIn: true,
+                    allowConnectedAccounts: true,
+                  } : null,
+                  "auth.oauth.providers.microsoft": signInMethods.has("microsoft") ? {
+                    type: "microsoft",
+                    isShared: true,
+                    allowSignIn: true,
+                    allowConnectedAccounts: true,
+                  } : null,
+                },
+                pushable: false,
+              });
+
+              if (!providersUpdated) {
+                return;
+              }
+
+              await props.setStatus("email_theme_setup");
+            }))}
+          >
+            Continue
+          </DesignButton>
+        }
+      >
+        <DesignCard
+          glassmorphic={false}
+          contentClassName="p-0 overflow-hidden"
+          className="border-0 bg-white/90 ring-1 ring-black/[0.06] dark:bg-white/[0.06] dark:ring-white/[0.10]"
+        >
+          <div className="flex justify-center border-b border-black/[0.12] px-4 py-3 dark:border-white/[0.06] md:hidden">
+            <DesignPillToggle
+              options={[
+                { id: "methods", label: "Sign-in methods" },
+                { id: "preview", label: "Preview" },
+              ]}
+              selected={authSetupMobileTab}
+              onSelect={(id) => { setAuthSetupMobileTab(id === "preview" ? "preview" : "methods"); }}
+              size="sm"
+              gradient="default"
+              className="flex w-full max-w-md justify-center"
+            />
+          </div>
+          <div className="grid md:grid-cols-[minmax(260px,2fr)_minmax(0,3fr)]">
+            <div
+              className={cn(
+                "flex flex-col justify-center border-b border-black/[0.12] dark:border-white/[0.06] md:border-b-0 md:border-r",
+                authSetupMobileTab !== "methods" && "max-md:hidden",
+              )}
+            >
+              <div className="p-4 md:p-6">
+                <Typography className="mb-3 text-sm font-medium text-muted-foreground md:mb-4">
+                  Sign-in methods
+                </Typography>
+                <div className="overflow-hidden rounded-xl bg-white/90 ring-1 ring-black/[0.06] dark:bg-foreground/[0.04] dark:ring-white/[0.06]">
+                  {SIGN_IN_METHODS.map((method, index) => {
+                    const checked = signInMethods.has(method.id);
+                    return (
+                      <label
+                        key={method.id}
+                        className={cn(
+                          "flex cursor-pointer items-center justify-between gap-3 px-3 py-2.5 md:gap-4 md:px-4 md:py-3",
+                          index !== SIGN_IN_METHODS.length - 1 && "border-b border-black/[0.06] dark:border-white/[0.06]",
+                        )}
+                      >
+                        <span className="text-sm">{method.label}</span>
+                        <Switch
+                          checked={checked}
+                          onCheckedChange={(nextChecked) => toggleSignInMethod(method.id, nextChecked)}
+                        />
+                      </label>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+
+            <div
+              className={cn(
+                "flex items-center justify-center bg-foreground/[0.02] px-3 py-3 md:px-4 md:py-4 lg:px-6",
+                authSetupMobileTab !== "preview" && "max-md:hidden",
+              )}
+            >
+              <BrowserFrame url="your-website.com/signin" className="w-full">
+                <div className="flex min-h-[180px] items-center justify-center px-4 py-3 sm:min-h-[220px] md:min-h-[260px] md:px-5 md:py-4 lg:min-h-[300px]">
+                  <div className="pointer-events-none relative flex w-full items-center justify-center" inert>
+                    <div className="absolute inset-0 z-10 bg-transparent" />
+                    <div className="auth-preview-host-theme flex w-full justify-center">
+                      <AuthPage type="sign-in" mockProject={authPreviewProject} />
+                    </div>
+                  </div>
+                </div>
+              </BrowserFrame>
+            </div>
+          </div>
+        </DesignCard>
+      </OnboardingPage>
+    );
+  }
+
+  if (props.status === "domain_setup") {
+    return (
+      <DomainSetupTransitionState
+        advancing={domainSetupAutoAdvancing}
+        errorMessage={domainSetupAutoAdvanceError}
+        onRetry={advanceFromDomainSetup}
+        onOpenProject={() => router.push(`/projects/${encodeURIComponent(project.id)}`)}
+      />
+    );
+  }
+
+  if (props.status === "email_theme_setup") {
+    return (
+      <OnboardingPage
+        stepKey="email-theme-setup"
+        title="Select an email theme"
+        subtitle="Pick a theme for your transactional emails, or keep the default."
+        steps={timelineSteps}
+        currentStep="email_theme_setup"
+        onStepClick={handleTimelineStepClick}
+        disabled={saving}
+        wide
+        primaryAction={
+          <DesignButton
+            className="w-full rounded-full"
+            loading={saving}
+            onClick={() => runAsynchronouslyWithAlert(() => runWithSaving(async () => {
+              if (selectedEmailThemeId !== completeConfig.emails.selectedThemeId) {
+                const configUpdated = await updateConfig({
+                  adminApp: props.project.app,
+                  configUpdate: {
+                    "emails.selectedThemeId": selectedEmailThemeId,
+                  },
+                  pushable: true,
+                });
+                if (!configUpdated) {
+                  return;
+                }
+              }
+
+              if (includePayments) {
+                await props.setStatus("payments_setup");
+              } else {
+                await props.setStatus("welcome");
+              }
+            }))}
+          >
+            {includePayments ? "Continue" : "Finish"}
+          </DesignButton>
+        }
+      >
+        <div className="space-y-4">
+          {emailThemes.length === 0 && (
+            <DesignAlert
+              variant="warning"
+              title="No themes found"
+              description="Theme selection is temporarily unavailable. You can still continue."
+              glassmorphic
+            />
+          )}
+          <div className="grid gap-4 sm:grid-cols-3">
+            {emailThemes.map((theme) => {
+              const isSelected = selectedEmailThemeId === theme.id;
+              return (
+                <button
+                  key={theme.id}
+                  type="button"
+                  onClick={() => setSelectedEmailThemeId(theme.id)}
+                  className={cn(
+                    "relative flex flex-col overflow-hidden rounded-2xl text-left transition-[box-shadow,background-color] duration-150 hover:transition-none",
+                    isSelected
+                      ? cn(
+                          "bg-blue-500/[0.06] dark:bg-blue-500/[0.04] ring-1 ring-blue-500/40",
+                          "shadow-[0_12px_40px_-8px_rgba(59,130,246,0.45),0_0_1px_rgba(59,130,246,0.2)]",
+                          "dark:shadow-[0_14px_48px_-10px_rgba(96,165,250,0.38),0_0_1px_rgba(96,165,250,0.25)]",
+                        )
+                      : cn(
+                          "bg-white/60 dark:bg-background/40 dark:backdrop-blur-xl",
+                          "ring-1 ring-black/[0.05] hover:ring-black/[0.09] dark:ring-white/[0.05] dark:hover:ring-white/[0.09]",
+                        ),
+                  )}
+                >
+                  <div
+                    className={cn(
+                      "aspect-[4/3] overflow-hidden border-b border-black/[0.06] dark:border-white/[0.06] bg-background transition-opacity duration-150",
+                      !isSelected && "opacity-[0.65]",
+                    )}
+                  >
+                    <div style={{ transform: "scale(0.5)", transformOrigin: "top left", width: "200%", height: "200%" }}>
+                      <OnboardingEmailThemePreview adminApp={props.project.app} themeId={theme.id} />
+                    </div>
+                  </div>
+                  <div className="flex items-center justify-between gap-2 p-3">
+                    <Typography
+                      className={cn(
+                        "min-w-0 flex-1 text-sm font-medium transition-colors duration-150",
+                        isSelected ? "text-foreground" : "text-muted-foreground",
+                      )}
+                    >
+                      {theme.displayName}
+                    </Typography>
+                    {isSelected && (
+                      <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-600 text-white shadow-sm">
+                        <CheckCircleIcon className="h-4 w-4" weight="fill" />
+                      </div>
+                    )}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </OnboardingPage>
+    );
+  }
+
+  if (props.status === "payments_setup") {
+    return (
+      <OnboardingPage
+        stepKey="payments-setup"
+        title="Set up payments"
+        subtitle="Connect bank account to start accepting payments from your users."
+        steps={timelineSteps}
+        currentStep="payments_setup"
+        onStepClick={handleTimelineStepClick}
+        disabled={saving}
+        actionsLayout="inline"
+        primaryAction={
+          <DesignButton
+            className="rounded-full px-6"
+            loading={saving}
+            onClick={() => runAsynchronouslyWithAlert(() => runWithSaving(async () => {
+              await props.setStatus("welcome");
+            }))}
+
+          >
+            Do Later
+          </DesignButton>
+        }
+        secondaryAction={selectedPaymentsCountry === "US" ? (
+          <DesignButton
+            className="rounded-full px-6"
+            variant="outline"
+            loading={saving}
+            onClick={() => runAsynchronouslyWithAlert(() => runWithSaving(async () => {
+              const setup = await props.project.app.setupPayments();
+              const redirectUrl = new URL(setup.url);
+              if (redirectUrl.protocol !== "https:") {
+                throw new Error("Payments setup redirect URL must use HTTPS.");
+              }
+              window.location.href = redirectUrl.toString();
+            }))}
+          >
+            Connect
+          </DesignButton>
+        ) : undefined}
+      >
+        <div className="mx-auto w-full max-w-sm">
+          <DesignCard
+            glassmorphic={false}
+            className="border-0 bg-white/90 ring-1 ring-black/[0.06] dark:bg-white/[0.06] dark:ring-white/[0.10]"
+            contentClassName="!p-6 md:!p-7"
+          >
+            <div className="flex flex-col items-center gap-6 md:gap-7">
+              <Typography type="h2" className="text-center tracking-tight text-balance">
+                Built-in Billing
+              </Typography>
+
+              <div className="flex w-full flex-col gap-3 rounded-xl bg-foreground/[0.03] px-5 py-4 text-sm text-muted-foreground">
+                <div className="flex items-center gap-2.5">
+                  <WebhooksLogoIcon className="h-3.5 w-3.5 shrink-0 text-foreground/50" />
+                  <span>No webhooks or syncing required</span>
+                </div>
+                <div className="flex items-center gap-2.5">
+                  <ArrowsClockwiseIcon className="h-3.5 w-3.5 shrink-0 text-foreground/50" />
+                  <span>One-time and recurring payments</span>
+                </div>
+                <div className="flex items-center gap-2.5">
+                  <ChartBarIcon className="h-3.5 w-3.5 shrink-0 text-foreground/50" />
+                  <span>Usage-based billing support</span>
+                </div>
+              </div>
+
+              <div className="w-full space-y-2.5">
+                <Typography className="text-xs font-medium text-muted-foreground">Country of residence</Typography>
+                <DesignSelectorDropdown
+                  value={selectedPaymentsCountry}
+                  onValueChange={setSelectedPaymentsCountry}
+                  options={PAYMENT_COUNTRY_OPTIONS.map((country) => ({ value: country.value, label: country.label }))}
+                  size="md"
+                />
+                <div className="flex flex-wrap items-center justify-center gap-x-1.5 gap-y-1 text-center text-xs text-muted-foreground">
+                  <ShieldCheckIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden />
+                  <span>Powered by</span>
+                  <StripeWordmark className="h-3 w-auto shrink-0 translate-y-px text-[#635BFF] dark:text-[#8b87ff]" />
+                </div>
+                {selectedPaymentsCountry !== "US" && (
+                  <Typography className="text-center text-xs text-amber-600 dark:text-amber-400">
+                    Payments is currently only available in the United States.
+                  </Typography>
+                )}
+              </div>
+            </div>
+          </DesignCard>
+        </div>
+      </OnboardingPage>
+    );
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-6 md:px-8">
+      <Alert>
+        <WarningCircleIcon className="h-4 w-4" />
+        <AlertTitle>Unknown onboarding step</AlertTitle>
+        <AlertDescription>
+          This project has an unknown onboarding state. Open the project directly and continue from the dashboard.
+        </AlertDescription>
+      </Alert>
+      <div className="mt-4 flex justify-end">
+        <Button onClick={() => router.push(`/projects/${encodeURIComponent(props.project.id)}`)}>Open Project</Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/shared.ts b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/shared.ts
new file mode 100644
index 0000000000..6b8ac03f14
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/shared.ts
@@ -0,0 +1,216 @@
+import { stackAppInternalsSymbol } from "@/lib/stack-app-internals";
+import { AdminOwnedProject } from "@stackframe/stack";
+import { ALL_APPS, type AppId } from "@stackframe/stack-shared/dist/apps/apps-config";
+import { projectOnboardingStatusValues, type ProjectOnboardingStatus } from "@stackframe/stack-shared/dist/schema-fields";
+import { stringCompare } from "@stackframe/stack-shared/dist/utils/strings";
+
+const PROJECT_ONBOARDING_STATUSES = projectOnboardingStatusValues;
+
+export type SignInMethod = "credential" | "magicLink" | "passkey" | "google" | "github" | "microsoft";
+
+export const SIGN_IN_METHODS: Array<{ id: SignInMethod, label: string }> = [
+  { id: "credential", label: "Email & password" },
+  { id: "magicLink", label: "Magic link / OTP" },
+  { id: "passkey", label: "Passkey" },
+  { id: "google", label: "Google" },
+  { id: "github", label: "GitHub" },
+  { id: "microsoft", label: "Microsoft" },
+];
+
+export const REQUIRED_APP_IDS: AppId[] = ["authentication", "emails"];
+export const PRIMARY_APP_IDS: AppId[] = ["authentication", "emails", "payments", "analytics"];
+export const ALL_APP_IDS = Object.keys(ALL_APPS) as AppId[];
+
+export type StackAppInternals = {
+  sendRequest: (path: string, requestOptions: RequestInit, requestType?: "client" | "server" | "admin") => Promise<Response>,
+  refreshOwnedProjects: () => Promise<void>,
+};
+
+export type TimelineStep = {
+  id: ProjectOnboardingStatus,
+  label: string,
+};
+
+export const PAYMENT_COUNTRY_OPTIONS = [
+  { value: "US", label: "United States" },
+  { value: "OTHER", label: "Other" },
+] as const;
+
+export function isStackAppInternals(value: unknown): value is StackAppInternals {
+  return (
+    value != null
+    && typeof value === "object"
+    && "sendRequest" in value
+    && typeof value.sendRequest === "function"
+    && "refreshOwnedProjects" in value
+    && typeof value.refreshOwnedProjects === "function"
+  );
+}
+
+export function getStackAppInternals(appValue: unknown): StackAppInternals {
+  if (appValue == null || typeof appValue !== "object") {
+    throw new Error("The Stack app instance is unavailable.");
+  }
+
+  const internals = Reflect.get(appValue, stackAppInternalsSymbol);
+  if (!isStackAppInternals(internals)) {
+    throw new Error("The Stack client app cannot send internal requests.");
+  }
+
+  return internals;
+}
+
+export function isProjectOnboardingStatus(value: unknown): value is ProjectOnboardingStatus {
+  return typeof value === "string" && PROJECT_ONBOARDING_STATUSES.some((status) => status === value);
+}
+
+export function orderedAppIds() {
+  const primarySet = new Set(PRIMARY_APP_IDS);
+  const secondary = ALL_APP_IDS.filter((appId) => !primarySet.has(appId)).sort((a, b) => {
+    return stringCompare(ALL_APPS[a].displayName, ALL_APPS[b].displayName);
+  });
+  return [...PRIMARY_APP_IDS, ...secondary];
+}
+
+export function normalizeTrustedDomain(input: string): string {
+  const trimmed = input.trim();
+  if (trimmed.length === 0) {
+    return "";
+  }
+
+  let parsed: URL;
+  try {
+    parsed = new URL(trimmed);
+  } catch {
+    throw new Error("Trusted domain must be a valid URL.");
+  }
+
+  if (parsed.protocol !== "https:" && parsed.protocol !== "http:") {
+    throw new Error("Trusted domain must start with http:// or https://.");
+  }
+
+  return parsed.toString().replace(/\/$/, "");
+}
+
+export function buildTimeline(includePayments: boolean): TimelineStep[] {
+  const timeline: TimelineStep[] = [
+    { id: "config_choice", label: "Config" },
+    { id: "apps_selection", label: "Apps" },
+    { id: "auth_setup", label: "Auth" },
+    { id: "email_theme_setup", label: "Email Theme" },
+  ];
+
+  if (includePayments) {
+    timeline.push({ id: "payments_setup", label: "Payments" });
+  }
+
+  timeline.push({ id: "welcome", label: "Finish" });
+  return timeline;
+}
+
+export function buildLinkExistingTimeline(includePayments: boolean): TimelineStep[] {
+  const timeline: TimelineStep[] = [
+    { id: "config_choice", label: "Config" },
+  ];
+
+  if (includePayments) {
+    timeline.push({ id: "payments_setup", label: "Payments" });
+  }
+
+  timeline.push({ id: "welcome", label: "Finish" });
+  return timeline;
+}
+
+export function beginPendingAction(
+  pendingRef: { current: boolean },
+  setPending: (value: boolean) => void,
+) {
+  if (pendingRef.current) {
+    return false;
+  }
+
+  pendingRef.current = true;
+  setPending(true);
+  return true;
+}
+
+export function endPendingAction(
+  pendingRef: { current: boolean },
+  setPending: (value: boolean) => void,
+) {
+  pendingRef.current = false;
+  setPending(false);
+}
+
+export function deriveInitialSignInMethods(project: AdminOwnedProject, status: ProjectOnboardingStatus): Set<SignInMethod> {
+  const config = project.config;
+  const methods = new Set<SignInMethod>();
+
+  if (config.credentialEnabled) {
+    methods.add("credential");
+  }
+  if (config.magicLinkEnabled) {
+    methods.add("magicLink");
+  }
+  if (config.passkeyEnabled) {
+    methods.add("passkey");
+  }
+
+  for (const provider of config.oauthProviders) {
+    if (provider.id === "google" || provider.id === "github" || provider.id === "microsoft") {
+      methods.add(provider.id);
+    }
+  }
+
+  const hasDefaultUntouchedAuthConfig = (
+    config.credentialEnabled
+    && !config.magicLinkEnabled
+    && !config.passkeyEnabled
+    && config.oauthProviders.length === 0
+  );
+  const isInEarlyOnboardingStep = (
+    status === "config_choice"
+    || status === "apps_selection"
+    || status === "auth_setup"
+  );
+  if (hasDefaultUntouchedAuthConfig && isInEarlyOnboardingStep) {
+    methods.add("credential");
+    methods.add("magicLink");
+    methods.add("google");
+    methods.add("github");
+  }
+
+  return methods;
+}
+
+export function deriveInitialApps(config: ReturnType<AdminOwnedProject["useConfig"]>, status: ProjectOnboardingStatus): Set<AppId> {
+  const enabledApps = new Set<AppId>();
+
+  for (const appId of ALL_APP_IDS) {
+    if (config.apps.installed[appId]?.enabled) {
+      enabledApps.add(appId);
+    }
+  }
+
+  const isInEarlyOnboardingStep = (
+    status === "config_choice"
+    || status === "apps_selection"
+    || status === "auth_setup"
+  );
+
+  if (enabledApps.size === 0 || (isInEarlyOnboardingStep && enabledApps.size <= REQUIRED_APP_IDS.length)) {
+    for (const primaryAppId of PRIMARY_APP_IDS) {
+      enabledApps.add(primaryAppId);
+    }
+  }
+
+  for (const requiredAppId of REQUIRED_APP_IDS) {
+    enabledApps.add(requiredAppId);
+  }
+
+  return enabledApps;
+}
+
+export function getStepIndex(steps: TimelineStep[], stepId: ProjectOnboardingStatus) {
+  return steps.findIndex((step) => step.id === stepId);
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client.test.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client.test.tsx
new file mode 100644
index 0000000000..eb6dbd50b7
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client.test.tsx
@@ -0,0 +1,129 @@
+// @vitest-environment jsdom
+
+import type { ButtonHTMLAttributes } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+
+vi.mock("@/components/ui", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/components/ui")>();
+
+  type MockButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: string,
+  };
+
+  return {
+    ...actual,
+    Button: ({ children, type, variant: _variant, ...props }: MockButtonProps) => (
+      <button type={type ?? "button"} {...props}>
+        {children}
+      </button>
+    ),
+  };
+});
+
+import { TooltipProvider } from "@/components/ui";
+
+import {
+  beginPendingAction,
+  DomainSetupTransitionState,
+  endPendingAction,
+  OnboardingAppCard,
+  OnboardingPage,
+} from "./page-client";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("beginPendingAction", () => {
+  it("blocks duplicate starts until the action finishes", () => {
+    const pendingRef = { current: false };
+    const setPending = vi.fn();
+
+    expect(beginPendingAction(pendingRef, setPending)).toBe(true);
+    expect(beginPendingAction(pendingRef, setPending)).toBe(false);
+    expect(setPending.mock.calls).toEqual([[true]]);
+
+    endPendingAction(pendingRef, setPending);
+
+    expect(pendingRef.current).toBe(false);
+    expect(setPending.mock.calls).toEqual([[true], [false]]);
+  });
+});
+
+describe("OnboardingPage", () => {
+  it("uses hover-exit-only transitions and accessible labels for progress dots", () => {
+    render(
+      <OnboardingPage
+        stepKey="apps-selection"
+        title="Select apps"
+        steps={[
+          { id: "config_choice", label: "Config" },
+          { id: "apps_selection", label: "Apps" },
+        ]}
+        currentStep="apps_selection"
+        onStepClick={vi.fn()}
+        primaryAction={<button type="button">Continue</button>}
+      >
+        <div>Step body</div>
+      </OnboardingPage>,
+    );
+
+    const completedStepButton = screen.getByRole("button", { name: "Go to step: Config" });
+    const currentStepButton = screen.getByRole("button", { name: "Apps" });
+    const className = completedStepButton.getAttribute("class") ?? "";
+
+    expect(className).toContain("transition-colors");
+    expect(className).toContain("hover:transition-none");
+    expect(currentStepButton.getAttribute("aria-current")).toBe("step");
+  });
+});
+
+describe("OnboardingAppCard", () => {
+  it("marks required cards as non-keyboard-interactive", () => {
+    const onToggle = vi.fn();
+
+    render(
+      <TooltipProvider>
+        <OnboardingAppCard
+          appId="authentication"
+          selected
+          required
+          primary
+          onToggle={onToggle}
+        />
+      </TooltipProvider>,
+    );
+
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
+
+    expect(button.getAttribute("aria-disabled")).toBe("true");
+    expect(button.getAttribute("tabindex")).toBe("-1");
+    expect(onToggle).not.toHaveBeenCalled();
+  });
+});
+
+describe("DomainSetupTransitionState", () => {
+  it("shows a retryable fallback when auto-advance fails", () => {
+    const onRetry = vi.fn();
+    const onOpenProject = vi.fn();
+
+    render(
+      <DomainSetupTransitionState
+        advancing={false}
+        errorMessage="Network request failed."
+        onRetry={onRetry}
+        onOpenProject={onOpenProject}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Retry" }));
+    fireEvent.click(screen.getByRole("button", { name: "Open Project" }));
+
+    expect(screen.getByText("Domain setup transition failed")).toBeTruthy();
+    expect(screen.getByText("Network request failed.")).toBeTruthy();
+    expect(onRetry).toHaveBeenCalledTimes(1);
+    expect(onOpenProject).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client.tsx
index eaa15deb22..fbe3a0a734 100644
--- a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client.tsx
@@ -1,1664 +1,15 @@
-'use client';
+"use client";
 
-import { AppIcon } from "@/components/app-square";
-import { DesignAlert } from "@/components/design-components/alert";
-import { DesignBadge } from "@/components/design-components/badge";
-import { DesignButton } from "@/components/design-components/button";
-import { DesignCard } from "@/components/design-components/card";
-import { DesignInput } from "@/components/design-components/input";
-import { DesignSelectorDropdown } from "@/components/design-components/select";
-import { useRouter } from "@/components/router";
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-  BrowserFrame,
-  Button,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Label,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Spinner,
-  Switch,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-  Typography,
-  cn,
-} from "@/components/ui";
-import { useUpdateConfig } from "@/lib/config-update";
-import { getPublicEnvVar } from "@/lib/env";
-import { stackAppInternalsSymbol } from "@/lib/stack-app-internals";
-import {
-  ArrowLeftIcon,
-  ArrowsClockwiseIcon,
-  ChartBarIcon,
-  CheckCircleIcon,
-  LightningIcon,
-  LinkBreakIcon,
-  PlusCircleIcon,
-  ShieldIcon,
-  StripeLogoIcon,
-  WalletIcon,
-  WarningCircleIcon,
-  WebhooksLogoIcon
-} from "@phosphor-icons/react";
-import { AdminOwnedProject, AuthPage, useStackApp, useUser } from "@stackframe/stack";
-import { ALL_APPS, type AppId } from "@stackframe/stack-shared/dist/apps/apps-config";
-import { previewTemplateSource } from "@stackframe/stack-shared/dist/helpers/emails";
-import { projectOnboardingStatusValues, type ProjectOnboardingStatus } from "@stackframe/stack-shared/dist/schema-fields";
-import { captureError } from "@stackframe/stack-shared/dist/utils/errors";
-import { allProviders } from "@stackframe/stack-shared/dist/utils/oauth";
-import { runAsynchronouslyWithAlert, wait } from "@stackframe/stack-shared/dist/utils/promises";
-import { stringCompare } from "@stackframe/stack-shared/dist/utils/strings";
-import { useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import PageClient from "./page-client-parts/content";
 
-const PROJECT_ONBOARDING_STATUSES = projectOnboardingStatusValues;
+export {
+  DomainSetupTransitionState,
+  OnboardingAppCard,
+  OnboardingPage,
+} from "./page-client-parts/components";
+export {
+  beginPendingAction,
+  endPendingAction,
+} from "./page-client-parts/shared";
 
-type SignInMethod = "credential" | "magicLink" | "passkey" | "google" | "github" | "microsoft";
-
-const SIGN_IN_METHODS: Array<{ id: SignInMethod, label: string }> = [
-  { id: "credential", label: "Email & password" },
-  { id: "magicLink", label: "Magic link / OTP" },
-  { id: "passkey", label: "Passkey" },
-  { id: "google", label: "Google" },
-  { id: "github", label: "GitHub" },
-  { id: "microsoft", label: "Microsoft" },
-];
-
-const REQUIRED_APP_IDS: AppId[] = ["authentication", "emails"];
-const PRIMARY_APP_IDS: AppId[] = ["authentication", "emails", "payments", "analytics"];
-const ALL_APP_IDS = Object.keys(ALL_APPS) as AppId[];
-
-type StackAppInternals = {
-  sendRequest: (path: string, requestOptions: RequestInit, requestType?: "client" | "server" | "admin") => Promise<Response>,
-  refreshOwnedProjects: () => Promise<void>,
-};
-
-type TimelineStep = {
-  id: ProjectOnboardingStatus,
-  label: string,
-};
-
-const PAYMENT_COUNTRY_OPTIONS = [
-  { value: "US", label: "United States" },
-  { value: "OTHER", label: "Other" },
-] as const;
-
-function isStackAppInternals(value: unknown): value is StackAppInternals {
-  return (
-    value != null
-    && typeof value === "object"
-    && "sendRequest" in value
-    && typeof value.sendRequest === "function"
-    && "refreshOwnedProjects" in value
-    && typeof value.refreshOwnedProjects === "function"
-  );
-}
-
-function getStackAppInternals(appValue: unknown): StackAppInternals {
-  if (appValue == null || typeof appValue !== "object") {
-    throw new Error("The Stack app instance is unavailable.");
-  }
-
-  const internals = Reflect.get(appValue, stackAppInternalsSymbol);
-  if (!isStackAppInternals(internals)) {
-    throw new Error("The Stack client app cannot send internal requests.");
-  }
-
-  return internals;
-}
-
-function isProjectOnboardingStatus(value: unknown): value is ProjectOnboardingStatus {
-  return typeof value === "string" && PROJECT_ONBOARDING_STATUSES.some((status) => status === value);
-}
-
-function orderedAppIds() {
-  const primarySet = new Set(PRIMARY_APP_IDS);
-  const secondary = ALL_APP_IDS.filter((appId) => !primarySet.has(appId)).sort((a, b) => {
-    return stringCompare(ALL_APPS[a].displayName, ALL_APPS[b].displayName);
-  });
-  return [...PRIMARY_APP_IDS, ...secondary];
-}
-
-function normalizeTrustedDomain(input: string): string {
-  const trimmed = input.trim();
-  if (trimmed.length === 0) {
-    return "";
-  }
-
-  let parsed: URL;
-  try {
-    parsed = new URL(trimmed);
-  } catch {
-    throw new Error("Trusted domain must be a valid URL.");
-  }
-
-  if (parsed.protocol !== "https:" && parsed.protocol !== "http:") {
-    throw new Error("Trusted domain must start with http:// or https://.");
-  }
-
-  return parsed.toString().replace(/\/$/, "");
-}
-
-function buildTimeline(includePayments: boolean): TimelineStep[] {
-  const timeline: TimelineStep[] = [
-    { id: "config_choice", label: "Config" },
-    { id: "apps_selection", label: "Apps" },
-    { id: "auth_setup", label: "Auth" },
-    { id: "email_theme_setup", label: "Email Theme" },
-  ];
-
-  if (includePayments) {
-    timeline.push({ id: "payments_setup", label: "Payments" });
-  }
-
-  timeline.push({ id: "completed", label: "Finish" });
-  return timeline;
-}
-
-function deriveInitialSignInMethods(project: AdminOwnedProject, status: ProjectOnboardingStatus): Set<SignInMethod> {
-  const config = project.config;
-  const methods = new Set<SignInMethod>();
-
-  if (config.credentialEnabled) {
-    methods.add("credential");
-  }
-  if (config.magicLinkEnabled) {
-    methods.add("magicLink");
-  }
-  if (config.passkeyEnabled) {
-    methods.add("passkey");
-  }
-
-  for (const provider of config.oauthProviders) {
-    if (provider.id === "google" || provider.id === "github" || provider.id === "microsoft") {
-      methods.add(provider.id);
-    }
-  }
-
-  const hasDefaultUntouchedAuthConfig = (
-    config.credentialEnabled
-    && !config.magicLinkEnabled
-    && !config.passkeyEnabled
-    && config.oauthProviders.length === 0
-  );
-  const isInEarlyOnboardingStep = (
-    status === "config_choice"
-    || status === "apps_selection"
-    || status === "auth_setup"
-  );
-  if (hasDefaultUntouchedAuthConfig && isInEarlyOnboardingStep) {
-    methods.add("credential");
-    methods.add("magicLink");
-    methods.add("google");
-  }
-
-  return methods;
-}
-
-function deriveInitialApps(config: ReturnType<AdminOwnedProject["useConfig"]>): Set<AppId> {
-  const enabledApps = new Set<AppId>();
-
-  for (const appId of ALL_APP_IDS) {
-    if (config.apps.installed[appId]?.enabled) {
-      enabledApps.add(appId);
-    }
-  }
-
-  if (enabledApps.size === 0) {
-    for (const primaryAppId of PRIMARY_APP_IDS) {
-      enabledApps.add(primaryAppId);
-    }
-  }
-
-  for (const requiredAppId of REQUIRED_APP_IDS) {
-    enabledApps.add(requiredAppId);
-  }
-
-  return enabledApps;
-}
-
-function getStepIndex(steps: TimelineStep[], stepId: ProjectOnboardingStatus) {
-  return steps.findIndex((step) => step.id === stepId);
-}
-
-function OnboardingTimeline(props: {
-  steps: TimelineStep[],
-  currentStep: ProjectOnboardingStatus,
-  onStepClick?: (step: ProjectOnboardingStatus) => void,
-  disabled?: boolean,
-}) {
-  const currentIndex = props.steps.findIndex((step) => step.id === props.currentStep);
-
-  return (
-    <div className="w-full overflow-x-auto pb-1">
-      <div className="flex min-w-max items-center justify-center gap-2">
-        {props.steps.map((step, index) => {
-          const isComplete = index < currentIndex;
-          const isCurrent = index === currentIndex;
-          const isClickable = isComplete && !props.disabled && props.onStepClick != null;
-          const circleClassName = isComplete
-            ? "bg-green-500 text-white"
-            : isCurrent
-              ? "bg-blue-600 text-white"
-              : "bg-muted text-muted-foreground";
-
-          return (
-            <div className="flex items-center gap-2" key={step.id}>
-              {isClickable ? (
-                <button
-                  type="button"
-                  className="flex items-center gap-2 rounded-full border bg-background px-3 py-1.5 transition-colors duration-150 hover:transition-none hover:border-foreground/25 hover:bg-foreground/[0.03]"
-                  onClick={() => props.onStepClick?.(step.id)}
-                >
-                  <div
-                    className={cn(
-                      "flex h-6 w-6 items-center justify-center rounded-full text-xs font-semibold",
-                      circleClassName
-                    )}
-                  >
-                    <CheckCircleIcon className="h-4 w-4" />
-                  </div>
-                  <span className={cn("text-sm", isCurrent ? "font-semibold text-foreground" : "text-muted-foreground")}>{step.label}</span>
-                </button>
-              ) : (
-                <div className="flex items-center gap-2 rounded-full border bg-background px-3 py-1.5">
-                  <div
-                    className={cn(
-                      "flex h-6 w-6 items-center justify-center rounded-full text-xs font-semibold",
-                      circleClassName
-                    )}
-                  >
-                    {isComplete ? <CheckCircleIcon className="h-4 w-4" /> : index + 1}
-                  </div>
-                  <span className={cn("text-sm", isCurrent ? "font-semibold text-foreground" : "text-muted-foreground")}>{step.label}</span>
-                </div>
-              )}
-              {index < props.steps.length - 1 && <div className="h-px w-8 bg-border" />}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function appStageBadgeColor(stage: (typeof ALL_APPS)[AppId]["stage"]) {
-  if (stage === "alpha") {
-    return "orange";
-  }
-  if (stage === "beta") {
-    return "blue";
-  }
-  return null;
-}
-
-function appStageLabel(stage: (typeof ALL_APPS)[AppId]["stage"]) {
-  if (stage === "alpha") {
-    return "Alpha";
-  }
-  if (stage === "beta") {
-    return "Beta";
-  }
-  return null;
-}
-
-function OnboardingAppCard(props: {
-  appId: AppId,
-  selected: boolean,
-  required: boolean,
-  primary: boolean,
-  disabled?: boolean,
-  onToggle: () => void,
-}) {
-  const app = ALL_APPS[props.appId];
-  const stageBadgeColor = appStageBadgeColor(app.stage);
-  const stageLabel = appStageLabel(app.stage);
-
-  return (
-    <Tooltip delayDuration={0}>
-      <TooltipTrigger asChild>
-        <button
-          type="button"
-          onClick={props.onToggle}
-          disabled={props.disabled}
-          className={cn(
-            "group relative w-full overflow-hidden rounded-2xl border transition-[transform,background-color,border-color,box-shadow] duration-150 hover:transition-none",
-            props.primary ? "min-h-[136px] px-4 py-4" : "min-h-[108px] px-3 py-3",
-            props.selected
-              ? "border-blue-500/45 bg-blue-500/[0.05] shadow-[0_8px_24px_rgba(59,130,246,0.08)]"
-              : "border-border bg-background/80 hover:border-foreground/20 hover:bg-foreground/[0.03]",
-            "active:scale-[0.99]",
-          )}
-        >
-          <div className="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-blue-500/[0.03] opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-hover:transition-none" />
-          {props.selected && (
-            <div className="absolute right-3 top-3 z-10 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-white shadow-sm">
-              <CheckCircleIcon className="h-4 w-4" weight="fill" />
-            </div>
-          )}
-          {props.primary ? (
-            <div className="relative flex h-full flex-col items-center justify-center gap-3 text-center">
-              <div className="flex w-full items-center justify-center">
-                <div className="scale-[0.72] rounded-2xl">
-                  <AppIcon appId={props.appId} enabled={props.selected} />
-                </div>
-              </div>
-
-              <div className="w-full space-y-2">
-                <div className="flex items-center justify-center gap-2">
-                  <Typography className="text-base font-semibold leading-tight">
-                    {app.displayName}
-                  </Typography>
-                </div>
-                <div className="flex min-h-6 items-center justify-center gap-2">
-                  {props.required && (
-                    <DesignBadge label="Required" color="green" size="sm" />
-                  )}
-                  {!props.required && stageBadgeColor && stageLabel && (
-                    <DesignBadge
-                      label={stageLabel}
-                      color={stageBadgeColor}
-                      size="sm"
-                    />
-                  )}
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className="relative flex h-full flex-col items-center justify-center gap-2 text-center">
-              <div className="shrink-0 scale-[0.56]">
-                <AppIcon appId={props.appId} enabled={props.selected} />
-              </div>
-              <div className="min-w-0 space-y-1">
-                <div className="flex items-center justify-center gap-1.5">
-                  <Typography className="truncate text-[11px] font-medium leading-tight">
-                    {app.displayName}
-                  </Typography>
-                </div>
-                <div className="flex min-h-5 items-center justify-center gap-1.5">
-                  {props.required && (
-                    <DesignBadge label="Required" color="green" size="sm" />
-                  )}
-                  {!props.required && stageBadgeColor && stageLabel && (
-                    <DesignBadge
-                      label={stageLabel}
-                      color={stageBadgeColor}
-                      size="sm"
-                    />
-                  )}
-                </div>
-              </div>
-            </div>
-          )}
-        </button>
-      </TooltipTrigger>
-      <TooltipContent
-        side="top"
-        className="z-50 max-w-xs rounded-2xl border border-white/[0.08] bg-background/95 p-4 backdrop-blur-xl"
-      >
-        <div className="space-y-2">
-          <div className="flex items-center gap-2">
-            <Typography className="text-sm font-semibold">{app.displayName}</Typography>
-            {stageBadgeColor && (
-              <DesignBadge
-                label={app.stage === "alpha" ? "Alpha" : "Beta"}
-                color={stageBadgeColor}
-                size="sm"
-              />
-            )}
-          </div>
-          <Typography variant="secondary" className="text-xs leading-relaxed">
-            {app.subtitle}
-          </Typography>
-        </div>
-      </TooltipContent>
-    </Tooltip>
-  );
-}
-
-function OnboardingEmailThemePreview(props: {
-  adminApp: AdminOwnedProject["app"],
-  themeId: string,
-}) {
-  const previewHtml = props.adminApp.useEmailPreview({
-    themeId: props.themeId,
-    templateTsxSource: previewTemplateSource,
-  });
-
-  return (
-    <iframe
-      srcDoc={previewHtml}
-      sandbox=""
-      className="pointer-events-none h-full w-full border-0"
-      title="Email theme preview"
-    />
-  );
-}
-
-function ModeNotImplementedCard(props: { onBack: () => void }) {
-  return (
-    <DesignCard
-      className="w-full"
-      title="Link Existing Config"
-      subtitle="This feature has not been implemented yet."
-      icon={LinkBreakIcon}
-      gradient="default"
-      glassmorphic
-      contentClassName="flex min-h-[420px] flex-col justify-between gap-6"
-    >
-      <DesignAlert
-        variant="warning"
-        title="Not available yet"
-        description="Linking an existing config into the onboarding flow is on the roadmap. You can go back and continue with Create New."
-        glassmorphic
-      />
-      <div className="mt-6 flex justify-end">
-        <DesignButton variant="outline" className="rounded-xl" onClick={props.onBack}>
-          Go Back
-        </DesignButton>
-      </div>
-    </DesignCard>
-  );
-}
-
-function ProjectOnboardingWizard(props: {
-  project: AdminOwnedProject,
-  status: ProjectOnboardingStatus,
-  mode: string | null,
-  setMode: (mode: string | null) => void,
-  setStatus: (status: ProjectOnboardingStatus) => Promise<void>,
-  onComplete: () => void,
-}) {
-  const router = useRouter();
-  const { project, status, setMode, setStatus, onComplete } = props;
-  const completeConfig = project.useConfig();
-  const updateConfig = useUpdateConfig();
-  const setProjectOnboardingStatus = setStatus;
-  const finishProjectOnboarding = onComplete;
-  const [saving, setSaving] = useState(false);
-  const [selectedApps, setSelectedApps] = useState<Set<AppId>>(() => deriveInitialApps(completeConfig));
-  const [signInMethods, setSignInMethods] = useState<Set<SignInMethod>>(() => deriveInitialSignInMethods(project, status));
-  const [trustedDomain, setTrustedDomain] = useState("");
-  const [domainHandlerPath, setDomainHandlerPath] = useState("/handler");
-  const [managedSubdomain, setManagedSubdomain] = useState("");
-  const [managedSenderLocalPart, setManagedSenderLocalPart] = useState("");
-  const [managedDomainSetupStatus, setManagedDomainSetupStatus] = useState<string | null>(null);
-  const [requiredAppsNotice, setRequiredAppsNotice] = useState<string | null>(null);
-  const [selectedEmailThemeId, setSelectedEmailThemeId] = useState(completeConfig.emails.selectedThemeId);
-  const [selectedPaymentsCountry, setSelectedPaymentsCountry] = useState("US");
-  const [selectedConfigChoice, setSelectedConfigChoice] = useState<"create-new" | "link-existing">("create-new");
-  const previousProjectId = useRef<string | null>(null);
-
-  const runWithSaving = useCallback(async (fn: () => Promise<void>) => {
-    setSaving(true);
-    try {
-      await fn();
-    } finally {
-      setSaving(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (previousProjectId.current === project.id) {
-      return;
-    }
-    previousProjectId.current = project.id;
-
-    setSelectedApps(deriveInitialApps(completeConfig));
-    setSignInMethods(deriveInitialSignInMethods(project, status));
-
-    const trustedDomains = Object.values(completeConfig.domains.trustedDomains)
-      .filter((entry) => entry.baseUrl != null)
-      .map((entry) => ({ baseUrl: entry.baseUrl, handlerPath: entry.handlerPath }));
-
-    if (trustedDomains[0]) {
-      const trustedDomainEntry = trustedDomains[0];
-      if (trustedDomainEntry.baseUrl == null) {
-        throw new Error("Invariant violated: trusted domain entry is missing a baseUrl.");
-      }
-      setTrustedDomain(trustedDomainEntry.baseUrl);
-      setDomainHandlerPath(trustedDomainEntry.handlerPath);
-    } else {
-      setTrustedDomain("");
-      setDomainHandlerPath("/handler");
-    }
-
-    const serverConfig = completeConfig.emails.server;
-    setManagedSubdomain(serverConfig.managedSubdomain ?? "");
-    setManagedSenderLocalPart(serverConfig.managedSenderLocalPart ?? "");
-    setSelectedEmailThemeId(completeConfig.emails.selectedThemeId);
-    setManagedDomainSetupStatus(null);
-    setRequiredAppsNotice(null);
-    setSelectedConfigChoice("create-new");
-  }, [completeConfig, project, project.id, status]);
-
-  const emailThemes = project.app.useEmailThemes();
-  const includePayments = selectedApps.has("payments") || status === "payments_setup" || completeConfig.apps.installed.payments?.enabled === true;
-  const timelineSteps = useMemo(() => buildTimeline(includePayments), [includePayments]);
-  const currentTimelineIndex = useMemo(() => getStepIndex(timelineSteps, status), [status, timelineSteps]);
-
-  const handleTimelineStepClick = useCallback((step: ProjectOnboardingStatus) => {
-    const targetIndex = getStepIndex(timelineSteps, step);
-    if (targetIndex < 0 || targetIndex >= currentTimelineIndex) {
-      return;
-    }
-
-    runAsynchronouslyWithAlert(async () => {
-      if (step === "config_choice") {
-        setMode(null);
-      }
-      await setStatus(step);
-    });
-  }, [currentTimelineIndex, setMode, setStatus, timelineSteps]);
-
-  useEffect(() => {
-    if (status !== "domain_setup") {
-      return;
-    }
-
-    runAsynchronouslyWithAlert(async () => {
-      await setStatus("email_theme_setup");
-    });
-  }, [setStatus, status]);
-
-  const authPreviewProject = useMemo(() => {
-    return {
-      id: project.id,
-      config: {
-        signUpEnabled: true,
-        credentialEnabled: signInMethods.has("credential"),
-        magicLinkEnabled: signInMethods.has("magicLink"),
-        passkeyEnabled: signInMethods.has("passkey"),
-        oauthProviders: (allProviders as readonly string[])
-          .filter((providerId) => signInMethods.has(providerId as SignInMethod))
-          .map((providerId) => ({ id: providerId, type: "shared" as const })),
-      },
-    };
-  }, [project.id, signInMethods]);
-
-  const toggleSignInMethod = (method: SignInMethod, enabled: boolean) => {
-    setSignInMethods((previous) => {
-      const next = new Set(previous);
-      if (enabled) {
-        next.add(method);
-      } else {
-        next.delete(method);
-      }
-      return next;
-    });
-  };
-
-  const toggleApp = (appId: AppId) => {
-    setSelectedApps((previous) => {
-      const next = new Set(previous);
-      if (REQUIRED_APP_IDS.includes(appId)) {
-        if (next.has(appId)) {
-          setRequiredAppsNotice(`${ALL_APPS[appId].displayName} is required during onboarding and can't be turned off.`);
-        }
-        next.add(appId);
-        return next;
-      }
-
-      setRequiredAppsNotice(null);
-      if (next.has(appId)) {
-        next.delete(appId);
-      } else {
-        next.add(appId);
-      }
-      return next;
-    });
-  };
-
-  const finalizeOnboarding = useCallback(async () => {
-    await runWithSaving(async () => {
-      await setProjectOnboardingStatus("completed");
-      finishProjectOnboarding();
-    });
-  }, [finishProjectOnboarding, runWithSaving, setProjectOnboardingStatus]);
-
-  if (props.status === "config_choice" && props.mode === "link-existing") {
-    return (
-      <div className="mx-auto flex w-full max-w-7xl flex-1 flex-col min-h-0 space-y-5 px-4 py-6 md:px-8">
-        <OnboardingTimeline
-          steps={timelineSteps}
-          currentStep="config_choice"
-          onStepClick={handleTimelineStepClick}
-          disabled={saving}
-        />
-        <div className="flex min-h-0 flex-1 flex-col">
-          <ModeNotImplementedCard
-            onBack={() => {
-              props.setMode(null);
-              setSelectedConfigChoice("create-new");
-            }}
-          />
-        </div>
-      </div>
-    );
-  }
-
-  if (props.status === "config_choice") {
-    const createNewSelected = selectedConfigChoice === "create-new";
-    const linkExistingSelected = selectedConfigChoice === "link-existing";
-
-    return (
-      <div className="mx-auto flex w-full max-w-7xl flex-1 flex-col min-h-0 space-y-5 px-4 py-6 md:px-8">
-        <OnboardingTimeline
-          steps={timelineSteps}
-          currentStep="config_choice"
-          onStepClick={handleTimelineStepClick}
-          disabled={saving}
-        />
-        <DesignCard
-          className="flex min-h-0 flex-1 flex-col w-full"
-          title="Choose How You Want To Start"
-          subtitle="Create a fresh Stack Auth config, or link an existing config file."
-          icon={LightningIcon}
-          gradient="blue"
-          glassmorphic
-          contentClassName="flex min-h-[calc(100vh-220px)] flex-1 flex-col gap-6"
-          actions={
-            <DesignButton
-              className="rounded-xl"
-              loading={saving}
-              onClick={() => runAsynchronouslyWithAlert(() => runWithSaving(async () => {
-                if (selectedConfigChoice === "create-new") {
-                  await props.setStatus("apps_selection");
-                } else {
-                  props.setMode("link-existing");
-                }
-              }))}
-            >
-              Next
-            </DesignButton>
-          }
-        >
-          <div className="grid min-h-[280px] flex-1 gap-4 md:grid-cols-2">
-            <button
-              type="button"
-              className={cn(
-                "group relative flex min-h-[260px] flex-col items-center justify-center gap-4 rounded-3xl border p-6 text-center transition-colors duration-150 hover:transition-none",
-                createNewSelected
-                  ? "border-blue-500/45 bg-blue-500/[0.06] shadow-[0_8px_24px_rgba(59,130,246,0.08)]"
-                  : "border-black/[0.08] bg-background/70 hover:bg-foreground/[0.03] dark:border-white/[0.08]",
-              )}
-              onClick={() => setSelectedConfigChoice("create-new")}
-              disabled={saving}
-            >
-              {createNewSelected && (
-                <div className="absolute right-4 top-4 z-10 flex h-7 w-7 items-center justify-center rounded-full bg-green-500 text-white shadow-sm">
-                  <CheckCircleIcon className="h-4 w-4" weight="fill" />
-                </div>
-              )}
-              <div className="flex flex-col items-center gap-4 text-center">
-                <div
-                  className={cn(
-                    "w-fit rounded-xl p-2",
-                    createNewSelected ? "bg-blue-500/10 text-blue-600" : "bg-foreground/[0.05] text-muted-foreground",
-                  )}
-                >
-                  <LightningIcon className="h-6 w-6" />
-                </div>
-                <div className="space-y-2">
-                  <Typography type="h3">Create New</Typography>
-                  <Typography variant="secondary">Start from curated defaults and configure apps step-by-step.</Typography>
-                </div>
-              </div>
-            </button>
-
-            <button
-              type="button"
-              className={cn(
-                "group relative flex min-h-[260px] flex-col items-center justify-center gap-4 rounded-3xl border p-6 text-center transition-colors duration-150 hover:transition-none",
-                linkExistingSelected
-                  ? "border-blue-500/45 bg-blue-500/[0.06] shadow-[0_8px_24px_rgba(59,130,246,0.08)]"
-                  : "border-black/[0.08] bg-background/70 hover:bg-foreground/[0.03] dark:border-white/[0.08]",
-              )}
-              onClick={() => setSelectedConfigChoice("link-existing")}
-              disabled={saving}
-            >
-              {linkExistingSelected && (
-                <div className="absolute right-4 top-4 z-10 flex h-7 w-7 items-center justify-center rounded-full bg-green-500 text-white shadow-sm">
-                  <CheckCircleIcon className="h-4 w-4" weight="fill" />
-                </div>
-              )}
-              <div className="flex flex-col items-center gap-4 text-center">
-                <div
-                  className={cn(
-                    "w-fit rounded-xl p-2",
-                    linkExistingSelected ? "bg-blue-500/10 text-blue-600" : "bg-foreground/[0.05] text-muted-foreground",
-                  )}
-                >
-                  <LinkBreakIcon className="h-6 w-6" />
-                </div>
-                <div className="space-y-2">
-                  <Typography type="h3">Link Existing Config</Typography>
-                  <Typography variant="secondary">Bring an existing config into this project.</Typography>
-                </div>
-              </div>
-            </button>
-          </div>
-        </DesignCard>
-      </div>
-    );
-  }
-
-  if (props.status === "apps_selection") {
-    const orderedIds = orderedAppIds();
-    const primaryAppIds = orderedIds.filter((appId) => PRIMARY_APP_IDS.includes(appId));
-    const secondaryAppIds = orderedIds.filter((appId) => !PRIMARY_APP_IDS.includes(appId));
-
-    return (
-      <div className="mx-auto w-full max-w-7xl space-y-5 px-4 py-6 md:px-8">
-        <OnboardingTimeline
-          steps={timelineSteps}
-          currentStep="apps_selection"
-          onStepClick={handleTimelineStepClick}
-          disabled={saving}
-        />
-        <DesignCard
-          className="w-full"
-          title="Select Apps"
-          subtitle="Authentication, Emails, Payments, and Analytics are selected by default. Authentication and Emails are required."
-          icon={LightningIcon}
-          gradient="cyan"
-          glassmorphic
-          contentClassName="space-y-6"
-          actions={
-            <DesignButton
-              className="rounded-xl"
-              loading={saving}
-              onClick={() => runAsynchronouslyWithAlert(() => runWithSaving(async () => {
-                const appConfigUpdateEntries = new Map(
-                  ALL_APP_IDS.map((appId) => [
-                    `apps.installed.${appId}.enabled`,
-                    selectedApps.has(appId),
-                  ])
-                );
-
-                const configUpdated = await updateConfig({
-                  adminApp: props.project.app,
-                  configUpdate: Object.fromEntries(appConfigUpdateEntries),
-                  pushable: true,
-                });
-                if (!configUpdated) {
-                  return;
-                }
-                await props.setStatus("auth_setup");
-              }))}
-            >
-              Next
-            </DesignButton>
-          }
-        >
-          <TooltipProvider delayDuration={0}>
-            <div className="space-y-6">
-              {requiredAppsNotice && (
-                <DesignAlert
-                  variant="info"
-                  title="Required app"
-                  description={requiredAppsNotice}
-                  glassmorphic
-                />
-              )}
-
-              <div className="mx-auto max-w-2xl space-y-2 text-center">
-                <Typography className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
-                  Select apps
-                </Typography>
-                <Typography variant="secondary" className="text-sm">
-                  Start with the core Stack Auth apps now. You can enable or disable the rest later.
-                </Typography>
-              </div>
-
-              <div className="mx-auto w-full max-w-5xl space-y-4">
-                <div className="flex items-center justify-center">
-                  <DesignBadge label="Core apps" color="blue" size="sm" />
-                </div>
-                <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
-                  {primaryAppIds.map((appId) => (
-                    <OnboardingAppCard
-                      key={appId}
-                      appId={appId}
-                      selected={selectedApps.has(appId)}
-                      required={REQUIRED_APP_IDS.includes(appId)}
-                      primary
-                      disabled={saving}
-                      onToggle={() => toggleApp(appId)}
-                    />
-                  ))}
-                </div>
-              </div>
-
-              <div className="space-y-4">
-                <div className="flex items-center gap-3">
-                  <Typography className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                    More apps
-                  </Typography>
-                </div>
-                <div
-                  className="grid gap-3"
-                  style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}
-                >
-                  {secondaryAppIds.map((appId) => (
-                    <OnboardingAppCard
-                      key={appId}
-                      appId={appId}
-                      selected={selectedApps.has(appId)}
-                      required={REQUIRED_APP_IDS.includes(appId)}
-                      primary={false}
-                      disabled={saving}
-                      onToggle={() => toggleApp(appId)}
-                    />
-                  ))}
-                </div>
-              </div>
-
-              <Typography variant="secondary" className="text-xs">
-                Core apps are ready by default, and required apps stay enabled through onboarding.
-              </Typography>
-            </div>
-          </TooltipProvider>
-        </DesignCard>
-      </div>
-    );
-  }
-
-  if (props.status === "auth_setup") {
-    return (
-      <div className="mx-auto w-full max-w-7xl space-y-5 px-4 py-6 md:px-8">
-        <OnboardingTimeline
-          steps={timelineSteps}
-          currentStep="auth_setup"
-          onStepClick={handleTimelineStepClick}
-          disabled={saving}
-        />
-        <DesignCard
-          className="w-full"
-          title="Configure Authentication"
-          subtitle="Choose sign-in methods and preview your sign-in page."
-          icon={CheckCircleIcon}
-          gradient="blue"
-          glassmorphic
-          contentClassName="flex min-h-[520px] flex-col gap-6"
-          actions={
-            <DesignButton
-              className="rounded-xl"
-              loading={saving}
-              onClick={() => runAsynchronouslyWithAlert(() => runWithSaving(async () => {
-                if (signInMethods.size === 0) {
-                  throw new Error("Select at least one sign-in method before continuing.");
-                }
-
-                const authMethodsUpdated = await updateConfig({
-                  adminApp: props.project.app,
-                  configUpdate: {
-                    "auth.password.allowSignIn": signInMethods.has("credential"),
-                    "auth.otp.allowSignIn": signInMethods.has("magicLink"),
-                    "auth.passkey.allowSignIn": signInMethods.has("passkey"),
-                  },
-                  pushable: true,
-                });
-
-                if (!authMethodsUpdated) {
-                  return;
-                }
-
-                const providersUpdated = await updateConfig({
-                  adminApp: props.project.app,
-                  configUpdate: {
-                    "auth.oauth.providers.google": signInMethods.has("google") ? {
-                      type: "google",
-                      isShared: true,
-                      allowSignIn: true,
-                      allowConnectedAccounts: true,
-                    } : null,
-                    "auth.oauth.providers.github": signInMethods.has("github") ? {
-                      type: "github",
-                      isShared: true,
-                      allowSignIn: true,
-                      allowConnectedAccounts: true,
-                    } : null,
-                    "auth.oauth.providers.microsoft": signInMethods.has("microsoft") ? {
-                      type: "microsoft",
-                      isShared: true,
-                      allowSignIn: true,
-                      allowConnectedAccounts: true,
-                    } : null,
-                  },
-                  pushable: false,
-                });
-
-                if (!providersUpdated) {
-                  return;
-                }
-
-                await props.setStatus("email_theme_setup");
-              }))}
-            >
-              Next
-            </DesignButton>
-          }
-        >
-          <div className="grid flex-1 overflow-hidden rounded-2xl border border-black/[0.08] bg-background/70 dark:border-white/[0.08] xl:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
-            <div className="flex items-center justify-center px-6 py-8">
-              <div className="w-full max-w-[280px] space-y-5">
-                <div className="space-y-2">
-                  <Typography type="h3">Sign-in methods</Typography>
-                  <Typography variant="secondary" className="text-sm">
-                    More sign-in methods are available on the dashboard later.
-                  </Typography>
-                </div>
-
-                <div className="rounded-2xl border border-black/[0.08] bg-background/80 dark:border-white/[0.08]">
-                  {SIGN_IN_METHODS.map((method, index) => {
-                    const checked = signInMethods.has(method.id);
-                    return (
-                      <label
-                        key={method.id}
-                        className={cn(
-                          "flex items-center justify-between gap-4 px-4 py-3",
-                          index !== SIGN_IN_METHODS.length - 1 && "border-b border-black/[0.06] dark:border-white/[0.06]",
-                        )}
-                      >
-                        <span className="text-sm">{method.label}</span>
-                        <Switch
-                          checked={checked}
-                          onCheckedChange={(nextChecked) => toggleSignInMethod(method.id, nextChecked)}
-                        />
-                      </label>
-                    );
-                  })}
-                </div>
-              </div>
-            </div>
-
-            <div className="hidden items-center justify-center bg-zinc-300 px-2 py-8 dark:bg-zinc-800 md:flex lg:px-4">
-              <div className="flex w-full max-w-[1480px] items-center justify-center">
-                <BrowserFrame url="your-website.com/signin" className="w-full">
-                  <div className="flex min-h-[420px] items-center justify-center px-6 py-8">
-                    <div className="pointer-events-none relative flex w-full items-center justify-center" inert>
-                      <div className="absolute inset-0 z-10 bg-transparent" />
-                      <AuthPage type="sign-in" mockProject={authPreviewProject} />
-                    </div>
-                  </div>
-                </BrowserFrame>
-              </div>
-            </div>
-          </div>
-        </DesignCard>
-      </div>
-    );
-  }
-
-  if (props.status === "domain_setup") {
-    return (
-      <div className="flex w-full min-h-[320px] items-center justify-center">
-        <Spinner size={24} />
-      </div>
-    );
-  }
-
-  if (props.status === "email_theme_setup") {
-    return (
-      <div className="mx-auto w-full max-w-7xl space-y-5 px-4 py-6 md:px-8">
-        <OnboardingTimeline
-          steps={timelineSteps}
-          currentStep="email_theme_setup"
-          onStepClick={handleTimelineStepClick}
-          disabled={saving}
-        />
-        <DesignCard
-          className="w-full"
-          title="Select Email Theme"
-          subtitle="Choose from existing themes. You can continue without changing the default theme."
-          icon={CheckCircleIcon}
-          gradient="purple"
-          glassmorphic
-          contentClassName="flex min-h-[520px] flex-col gap-6"
-          actions={
-            <DesignButton
-              className="rounded-xl"
-              loading={saving}
-              onClick={() => runAsynchronouslyWithAlert(() => runWithSaving(async () => {
-                if (selectedEmailThemeId !== completeConfig.emails.selectedThemeId) {
-                  const configUpdated = await updateConfig({
-                    adminApp: props.project.app,
-                    configUpdate: {
-                      "emails.selectedThemeId": selectedEmailThemeId,
-                    },
-                    pushable: true,
-                  });
-                  if (!configUpdated) {
-                    return;
-                  }
-                }
-
-                if (includePayments) {
-                  await props.setStatus("payments_setup");
-                } else {
-                  await props.setStatus("completed");
-                    props.onComplete();
-                }
-              }))}
-            >
-              {includePayments ? "Next" : "Finish"}
-            </DesignButton>
-          }
-        >
-          <div className="flex-1 space-y-4">
-            {emailThemes.length === 0 && (
-              <DesignAlert
-                variant="warning"
-                title="No themes found"
-                description="Theme selection is temporarily unavailable. You can still continue."
-                glassmorphic
-              />
-            )}
-
-            <div className="grid gap-4 lg:grid-cols-3">
-              {emailThemes.map((theme) => {
-                const isSelected = selectedEmailThemeId === theme.id;
-                return (
-                  <button
-                    key={theme.id}
-                    type="button"
-                    onClick={() => setSelectedEmailThemeId(theme.id)}
-                    className={cn(
-                      "group relative overflow-hidden rounded-3xl border text-left transition-[border-color,background-color,box-shadow] duration-150 hover:transition-none",
-                      isSelected
-                        ? "border-blue-500/45 bg-blue-500/[0.06] shadow-[0_8px_24px_rgba(59,130,246,0.08)]"
-                        : "border-border bg-background/70 hover:border-foreground/20 hover:bg-foreground/[0.03]",
-                    )}
-                  >
-                    {isSelected && (
-                      <div className="absolute right-4 top-4 z-10 flex h-7 w-7 items-center justify-center rounded-full bg-green-500 text-white shadow-sm">
-                        <CheckCircleIcon className="h-4 w-4" weight="fill" />
-                      </div>
-                    )}
-                    <div className="aspect-[4/3] overflow-hidden border-b border-border bg-background">
-                      <div style={{ transform: "scale(0.5)", transformOrigin: "top left", width: "200%", height: "200%" }}>
-                        <OnboardingEmailThemePreview adminApp={props.project.app} themeId={theme.id} />
-                      </div>
-                    </div>
-                    <div className="flex items-center justify-between gap-3 p-4">
-                      <Typography type="h4">{theme.displayName}</Typography>
-                    </div>
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-        </DesignCard>
-      </div>
-    );
-  }
-
-  if (props.status === "payments_setup") {
-    return (
-      <div className="mx-auto w-full max-w-6xl space-y-5 px-4 py-6 md:px-8">
-        <OnboardingTimeline
-          steps={timelineSteps}
-          currentStep="payments_setup"
-          onStepClick={handleTimelineStepClick}
-          disabled={saving}
-        />
-        <DesignCard
-          className="w-full"
-          title="Payments Onboarding"
-          subtitle="Use the same Stripe setup flow as the Payments app. Payments is currently supported in the United States only."
-          icon={StripeLogoIcon}
-          gradient="orange"
-          glassmorphic
-          contentClassName="flex min-h-[420px] flex-col gap-6"
-          actions={
-            <div className="flex flex-wrap items-center justify-end gap-2">
-              {selectedPaymentsCountry !== "US" && (
-                <DesignButton
-                  className="rounded-xl"
-                  variant="outline"
-                  onClick={() => setSelectedPaymentsCountry("US")}
-                >
-                  <ArrowLeftIcon className="mr-2 h-4 w-4" />
-                  Back
-                </DesignButton>
-              )}
-              <DesignButton
-                className="rounded-xl"
-                variant="outline"
-                loading={saving}
-                onClick={() => runAsynchronouslyWithAlert(() => runWithSaving(async () => {
-                  await finalizeOnboarding();
-                }))}
-              >
-                Do This Later
-              </DesignButton>
-              {selectedPaymentsCountry === "US" && (
-                <DesignButton
-                  className="rounded-xl"
-                  loading={saving}
-                  onClick={() => runAsynchronouslyWithAlert(() => runWithSaving(async () => {
-                    const setup = await props.project.app.setupPayments();
-                    const redirectUrl = new URL(setup.url);
-                    if (redirectUrl.protocol !== "https:") {
-                      throw new Error("Payments setup redirect URL must use HTTPS.");
-                    }
-                    window.location.href = redirectUrl.toString();
-                  }))}
-                >
-                  Continue Onboarding
-                </DesignButton>
-              )}
-            </div>
-          }
-        >
-          <div className="flex-1 space-y-6">
-            <div className="mx-auto max-w-sm">
-              <div className="rounded-3xl border border-border bg-background/70 p-8 text-center">
-                <div className="mx-auto mb-4 grid h-12 w-12 place-items-center rounded-full bg-primary/10 text-primary">
-                  <WalletIcon className="h-6 w-6" />
-                </div>
-                <Typography type="h3" className="mb-4">Setup Payments</Typography>
-                <Typography type="p" variant="secondary" className="mt-2">
-                  Let your users pay seamlessly and securely.
-                </Typography>
-                <ul className="mt-6 grid gap-3 text-left text-sm text-muted-foreground">
-                  <li className="flex items-center gap-2">
-                    <WebhooksLogoIcon className="h-4 w-4 text-primary" />
-                    <span>No webhooks or syncing</span>
-                  </li>
-                  <li className="flex items-center gap-2">
-                    <ArrowsClockwiseIcon className="h-4 w-4 text-primary" />
-                    <span>One-time and recurring</span>
-                  </li>
-                  <li className="flex items-center gap-2">
-                    <ChartBarIcon className="h-4 w-4 text-primary" />
-                    <span>Usage-based billing</span>
-                  </li>
-                </ul>
-                <div className="mt-8 space-y-3 text-left">
-                  <Label htmlFor="payments-country">Country of residence</Label>
-                  <Select value={selectedPaymentsCountry} onValueChange={setSelectedPaymentsCountry}>
-                    <SelectTrigger id="payments-country" className="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {PAYMENT_COUNTRY_OPTIONS.map((country) => (
-                        <SelectItem key={country.value} value={country.value}>
-                          {country.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="mt-4 flex items-center justify-center gap-2 text-xs text-muted-foreground">
-                  <ShieldIcon className="h-3.5 w-3.5" />
-                  <span>Powered by Stripe</span>
-                </div>
-              </div>
-            </div>
-
-            {selectedPaymentsCountry === "US" ? (
-              <DesignAlert
-                variant="info"
-                title="Payments is available in your country!"
-                description="You will be redirected to Stripe, our partner for payment processing, to connect your bank account. Or, you can do this later and stay in test transactions for now."
-                glassmorphic
-              />
-            ) : (
-              <DesignAlert
-                variant="warning"
-                title="Payments is not available in your country yet"
-                description="Stack Auth Payments is currently only available in the United States."
-                glassmorphic
-              />
-            )}
-          </div>
-        </DesignCard>
-      </div>
-    );
-  }
-
-  return (
-    <div className="mx-auto w-full max-w-6xl px-4 py-6 md:px-8">
-      <Alert>
-        <WarningCircleIcon className="h-4 w-4" />
-        <AlertTitle>Unknown onboarding step</AlertTitle>
-        <AlertDescription>
-          This project has an unknown onboarding state. Open the project directly and continue from the dashboard.
-        </AlertDescription>
-      </Alert>
-      <div className="mt-4 flex justify-end">
-        <Button onClick={() => router.push(`/projects/${encodeURIComponent(props.project.id)}`)}>Open Project</Button>
-      </div>
-    </div>
-  );
-}
-
-export default function PageClient() {
-  const app = useStackApp();
-  const appInternals = useMemo(() => getStackAppInternals(app), [app]);
-  const user = useUser({ or: 'redirect', projectIdMustMatch: "internal" });
-  const teams = user.useTeams();
-  const projects = user.useOwnedProjects();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const isLocalEmulator = getPublicEnvVar("NEXT_PUBLIC_STACK_IS_LOCAL_EMULATOR") === "true";
-
-  const selectedProjectId = searchParams.get("project_id");
-  const displayNameFromSearch = searchParams.get("display_name");
-  const redirectToNeonConfirmWith = searchParams.get("redirect_to_neon_confirm_with");
-  const redirectToConfirmWith = searchParams.get("redirect_to_confirm_with");
-  const mode = searchParams.get("mode");
-  const linkExistingBaitCapturedRef = useRef(false);
-
-  const [projectStatuses, setProjectStatuses] = useState<Map<string, ProjectOnboardingStatus>>(new Map());
-  const [loadingStatuses, setLoadingStatuses] = useState(true);
-  const [projectName, setProjectName] = useState(displayNameFromSearch ?? "");
-  const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null);
-  const [creatingTeam, setCreatingTeam] = useState(false);
-  const [creatingProject, setCreatingProject] = useState(false);
-  const [isCreateProjectOpen, setIsCreateProjectOpen] = useState(true);
-  const [isCreateTeamOpen, setIsCreateTeamOpen] = useState(false);
-  const [newTeamName, setNewTeamName] = useState("");
-
-  useEffect(() => {
-    if (selectedTeamId != null) {
-      return;
-    }
-
-    if (user.selectedTeam != null) {
-      setSelectedTeamId(user.selectedTeam.id);
-      return;
-    }
-
-    const firstTeam = teams.at(0);
-    if (firstTeam !== undefined) {
-      setSelectedTeamId(firstTeam.id);
-    }
-  }, [selectedTeamId, teams, user.selectedTeam]);
-
-  const updateSearchParams = useCallback((updates: Record<string, string | null>) => {
-    const params = new URLSearchParams(searchParams.toString());
-
-    for (const [key, value] of Object.entries(updates)) {
-      if (value == null || value.length === 0) {
-        params.delete(key);
-      } else {
-        params.set(key, value);
-      }
-    }
-
-    const query = params.toString();
-    router.replace(query.length > 0 ? `/new-project?${query}` : "/new-project");
-  }, [router, searchParams]);
-
-  useEffect(() => {
-    if (mode !== "link-existing" || linkExistingBaitCapturedRef.current) {
-      return;
-    }
-
-    linkExistingBaitCapturedRef.current = true;
-    captureError("new-project-link-existing-bait-engaged", new Error("bait engaged"));
-  }, [mode]);
-
-  useEffect(() => {
-    let cancelled = false;
-    runAsynchronouslyWithAlert(async () => {
-      setLoadingStatuses(true);
-      try {
-        const response = await appInternals.sendRequest("/internal/projects", {}, "client");
-        if (!response.ok) {
-          throw new Error(`Failed to load projects: ${response.status} ${await response.text()}`);
-        }
-
-        const body = await response.json();
-        if (body == null || typeof body !== "object" || !("items" in body) || !Array.isArray(body.items)) {
-          throw new Error("Project list endpoint returned an invalid response.");
-        }
-
-        const statusMap = new Map<string, ProjectOnboardingStatus>();
-        for (const item of body.items) {
-          if (item == null || typeof item !== "object" || !("id" in item) || typeof item.id !== "string") {
-            continue;
-          }
-
-          const onboardingStatus = "onboarding_status" in item ? item.onboarding_status : undefined;
-          if (!isProjectOnboardingStatus(onboardingStatus)) {
-            throw new Error(`Project ${item.id} returned an invalid onboarding status.`);
-          }
-          statusMap.set(item.id, onboardingStatus);
-        }
-
-        if (!cancelled) {
-          setProjectStatuses(statusMap);
-        }
-      } finally {
-        if (!cancelled) {
-          setLoadingStatuses(false);
-        }
-      }
-    });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [appInternals, projects.length]);
-
-  const selectedProject = useMemo(() => {
-    if (selectedProjectId == null) {
-      return null;
-    }
-    return projects.find((project) => project.id === selectedProjectId) ?? null;
-  }, [projects, selectedProjectId]);
-
-  const selectedProjectStatus = useMemo(() => {
-    if (selectedProjectId == null) {
-      return null;
-    }
-    return projectStatuses.get(selectedProjectId) ?? null;
-  }, [projectStatuses, selectedProjectId]);
-
-  useEffect(() => {
-    if (selectedProject == null || loadingStatuses || selectedProjectStatus !== "completed") {
-      return;
-    }
-
-    router.replace(`/projects/${encodeURIComponent(selectedProject.id)}`);
-  }, [loadingStatuses, router, selectedProject, selectedProjectStatus]);
-
-  const setSelectedProjectStatus = async (project: AdminOwnedProject, status: ProjectOnboardingStatus) => {
-    const projectInternals = getStackAppInternals(project.app);
-
-    const response = await projectInternals.sendRequest(
-      "/internal/projects/current",
-      {
-        method: "PATCH",
-        headers: {
-          "content-type": "application/json",
-        },
-        body: JSON.stringify({ onboarding_status: status }),
-      },
-      "admin",
-    );
-
-    if (!response.ok) {
-      throw new Error(`Failed to update onboarding status: ${response.status} ${await response.text()}`);
-    }
-
-    setProjectStatuses((previous) => {
-      const next = new Map(previous);
-      next.set(project.id, status);
-      return next;
-    });
-
-    await appInternals.refreshOwnedProjects();
-  };
-
-  if (isLocalEmulator) {
-    return (
-      <div className="w-full flex-grow flex items-center justify-center p-4">
-        <div className="max-w-lg w-full rounded-lg border border-border p-6 space-y-4">
-          <Typography type="h2">Project creation is disabled in local emulator mode</Typography>
-          <Typography variant="secondary">
-            Use the <b>Open config file</b> action on the Projects page to open or create projects from a local config file path.
-          </Typography>
-          <div className="flex justify-end">
-            <Button onClick={async () => {
-              router.push("/projects");
-              await wait(2000);
-            }}>
-              Go to Projects
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (loadingStatuses && selectedProjectId != null) {
-    return (
-      <div className="flex w-full flex-grow items-center justify-center">
-        <Spinner size={24} />
-      </div>
-    );
-  }
-
-  if (selectedProjectId != null && selectedProject == null) {
-    return (
-      <div className="w-full flex-grow flex items-center justify-center p-4">
-        <Card className="w-full max-w-xl">
-          <CardHeader>
-            <CardTitle>Project not found</CardTitle>
-            <CardDescription>We could not find the project in your account.</CardDescription>
-          </CardHeader>
-          <CardContent className="flex justify-end">
-            <Button variant="outline" onClick={() => router.push("/projects")}>Go to Projects</Button>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
-  if (selectedProject != null && !loadingStatuses && selectedProjectStatus === "completed") {
-    return (
-      <div className="flex w-full flex-grow items-center justify-center">
-        <Spinner size={24} />
-      </div>
-    );
-  }
-
-  if (selectedProject != null && !loadingStatuses && selectedProjectStatus == null) {
-    throw new Error(`Missing onboarding status for project ${selectedProject.id}.`);
-  }
-
-  if (selectedProject == null) {
-    return (
-      <div className="flex w-full flex-grow items-center justify-center">
-        <Dialog
-          open={isCreateProjectOpen}
-          onOpenChange={(open) => {
-            setIsCreateProjectOpen(open);
-            if (!open) {
-              router.push("/projects");
-            }
-          }}
-        >
-          <DialogContent
-            className="overflow-hidden border-0 bg-white/90 p-0 shadow-2xl backdrop-blur-xl ring-1 ring-black/[0.06] dark:bg-background/75 dark:ring-white/[0.08] sm:max-w-[720px] sm:rounded-3xl"
-            overlayProps={{ className: "bg-black/70 backdrop-blur-[2px]" }}
-            noCloseButton
-          >
-            <DialogHeader className="border-b border-black/[0.08] px-6 py-6 text-left dark:border-white/[0.08]">
-              <div className="flex items-center gap-3">
-                <div className="rounded-2xl bg-blue-500/10 p-2.5 text-blue-600 dark:bg-blue-500/15 dark:text-blue-400">
-                  <PlusCircleIcon className="h-5 w-5" />
-                </div>
-                <div className="space-y-1">
-                  <DialogTitle className="text-xl font-semibold tracking-tight">Create a new project</DialogTitle>
-                </div>
-              </div>
-              <DialogDescription>
-                Start by naming your project and choosing the team that will own it.
-              </DialogDescription>
-            </DialogHeader>
-
-            <div className="space-y-5 px-6 py-6">
-              <div className="space-y-2">
-                <Label htmlFor="project-name">Project name</Label>
-                <DesignInput
-                  id="project-name"
-                  value={projectName}
-                  onChange={(event) => setProjectName(event.target.value)}
-                  placeholder="My Project"
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="team-id">Team</Label>
-                <div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto]">
-                  <DesignSelectorDropdown
-                    value={selectedTeamId ?? ""}
-                    onValueChange={setSelectedTeamId}
-                    placeholder="Select a team"
-                    size="md"
-                    className="w-full"
-                    options={teams.map((team) => ({ value: team.id, label: team.displayName }))}
-                  />
-                  <DesignButton variant="outline" onClick={() => setIsCreateTeamOpen(true)} className="rounded-xl sm:min-w-[152px]">
-                    <PlusCircleIcon className="mr-2 h-4 w-4" />
-                    Create Team
-                  </DesignButton>
-                </div>
-              </div>
-            </div>
-
-            <DialogFooter className="border-t border-black/[0.08] px-6 py-4 dark:border-white/[0.08] sm:justify-end sm:space-x-2">
-              <DesignButton variant="outline" className="rounded-xl" onClick={() => router.push("/projects")} disabled={creatingProject}>
-                Cancel
-              </DesignButton>
-              <DesignButton
-                className="rounded-xl"
-                loading={creatingProject}
-                onClick={() => runAsynchronouslyWithAlert(async () => {
-                  const trimmedProjectName = projectName.trim();
-                  if (trimmedProjectName.length === 0) {
-                    throw new Error("Project name is required.");
-                  }
-
-                  const firstTeam = teams.at(0);
-                  const teamId = selectedTeamId ?? user.selectedTeam?.id ?? firstTeam?.id;
-                  if (teamId === undefined) {
-                    throw new Error("Select a team before creating the project.");
-                  }
-
-                  setCreatingProject(true);
-                  try {
-                    const newProject = await user.createProject({
-                      displayName: trimmedProjectName,
-                      teamId,
-                      onboardingStatus: "config_choice",
-                    });
-
-                    setProjectStatuses((previous) => {
-                      const next = new Map(previous);
-                      next.set(newProject.id, "config_choice");
-                      return next;
-                    });
-
-                    if (redirectToNeonConfirmWith != null) {
-                      const confirmSearchParams = new URLSearchParams(redirectToNeonConfirmWith);
-                      confirmSearchParams.set("default_selected_project_id", newProject.id);
-                      router.push(`/integrations/neon/confirm?${confirmSearchParams.toString()}`);
-                      await wait(2000);
-                      return;
-                    }
-
-                    if (redirectToConfirmWith != null) {
-                      const confirmSearchParams = new URLSearchParams(redirectToConfirmWith);
-                      confirmSearchParams.set("default_selected_project_id", newProject.id);
-                      router.push(`/integrations/custom/confirm?${confirmSearchParams.toString()}`);
-                      await wait(2000);
-                      return;
-                    }
-
-                    updateSearchParams({
-                      project_id: newProject.id,
-                      mode: null,
-                    });
-                  } finally {
-                    setCreatingProject(false);
-                  }
-                })}
-              >
-                Create Project
-              </DesignButton>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        <Dialog open={isCreateTeamOpen} onOpenChange={setIsCreateTeamOpen}>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Create Team</DialogTitle>
-              <DialogDescription>This team will be available immediately for project ownership.</DialogDescription>
-            </DialogHeader>
-
-            <div className="space-y-2">
-              <Label htmlFor="new-team-name">Team name</Label>
-              <DesignInput
-                id="new-team-name"
-                value={newTeamName}
-                onChange={(event) => setNewTeamName(event.target.value)}
-                placeholder="Acme Team"
-              />
-            </div>
-
-            <DialogFooter>
-              <DesignButton variant="outline" className="rounded-xl" onClick={() => setIsCreateTeamOpen(false)} disabled={creatingTeam}>
-                Cancel
-              </DesignButton>
-              <DesignButton
-                className="rounded-xl"
-                loading={creatingTeam}
-                onClick={() => runAsynchronouslyWithAlert(async () => {
-                  const trimmedTeamName = newTeamName.trim();
-                  if (trimmedTeamName.length === 0) {
-                    throw new Error("Team name is required.");
-                  }
-
-                  setCreatingTeam(true);
-                  try {
-                    const createdTeam = await user.createTeam({
-                      displayName: trimmedTeamName,
-                    });
-                    await user.setSelectedTeam(createdTeam.id);
-                    setSelectedTeamId(createdTeam.id);
-                    setNewTeamName("");
-                    setIsCreateTeamOpen(false);
-                  } finally {
-                    setCreatingTeam(false);
-                  }
-                })}
-              >
-                Create Team
-              </DesignButton>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex w-full flex-grow justify-center">
-      <ProjectOnboardingWizard
-        project={selectedProject}
-        status={selectedProjectStatus ?? "config_choice"}
-        mode={mode}
-        setMode={(nextMode) => updateSearchParams({ mode: nextMode })}
-        setStatus={(nextStatus) => setSelectedProjectStatus(selectedProject, nextStatus)}
-        onComplete={() => {
-          router.push(`/projects/${encodeURIComponent(selectedProject.id)}`);
-        }}
-      />
-    </div>
-  );
-}
+export default PageClient;
diff --git a/apps/dashboard/src/app/globals.css b/apps/dashboard/src/app/globals.css
index 7d76c55280..96b9cc3c27 100644
--- a/apps/dashboard/src/app/globals.css
+++ b/apps/dashboard/src/app/globals.css
@@ -130,6 +130,87 @@
   --radius: inherit !important;
 }
 
+/* Embedded AuthPage preview in dashboard: neutral tokens so tabs/inputs match hosted
+   handler UX. Dashboard :root uses lavender --muted (250°); stack-scope inherits it. */
+.auth-preview-host-theme {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-in-card: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-in-card: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-in-card: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --border-in-card: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --input-in-card: 240 5.9% 90%;
+  --ring: 240 10% 3.9%;
+}
+
+.dark .auth-preview-host-theme {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-in-card: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-in-card: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 240 3.7% 15.9%;
+  --accent-in-card: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 50%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 3.7% 35.9%;
+  --border-in-card: 240 3.7% 35.9%;
+  --input: 240 3.7% 25.9%;
+  --input-in-card: 240 3.7% 25.9%;
+  --ring: 240 4.9% 83.9%;
+}
+
+@keyframes onboarding-cascade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(18px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.onboarding-cascade {
+  opacity: 0;
+  animation: onboarding-cascade-in 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation-delay: calc(var(--cascade-i, 0) * 80ms + 60ms);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .onboarding-cascade {
+    animation: none;
+    opacity: 1;
+  }
+}
+
 @layer base {
   * {
     @apply border-border;
diff --git a/apps/dashboard/src/components/stripe-wordmark.tsx b/apps/dashboard/src/components/stripe-wordmark.tsx
new file mode 100644
index 0000000000..fd59a4f313
--- /dev/null
+++ b/apps/dashboard/src/components/stripe-wordmark.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+/**
+ * Stripe wordmark (paths from Wikimedia Commons: Stripe Logo, revised 2016).
+ * Fills use currentColor for theme-aware brand tint on parent.
+ */
+export function StripeWordmark(props: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="54 36 360.02 149.84"
+      className={props.className}
+      fill="currentColor"
+      role="img"
+      aria-label="Stripe"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M414,113.4c0-25.6-12.4-45.8-36.1-45.8c-23.8,0-38.2,20.2-38.2,45.6c0,30.1,17,45.3,41.4,45.3c11.9,0,20.9-2.7,27.7-6.5v-20c-6.8,3.4-14.6,5.5-24.5,5.5c-9.7,0-18.3-3.4-19.4-15.2h48.9C413.8,121,414,115.8,414,113.4z M364.6,103.9c0-11.3,6.9-16,13.2-16c6.1,0,12.6,4.7,12.6,16H364.6z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M301.1,67.6c-9.8,0-16.1,4.6-19.6,7.8l-1.3-6.2h-22v116.6l25-5.3l0.1-28.3c3.6,2.6,8.9,6.3,17.7,6.3c17.9,0,34.2-14.4,34.2-46.1C335.1,83.4,318.6,67.6,301.1,67.6z M295.1,136.5c-5.9,0-9.4-2.1-11.8-4.7l-0.1-37.1c2.6-2.9,6.2-4.9,11.9-4.9c9.1,0,15.4,10.2,15.4,23.3C310.5,126.5,304.3,136.5,295.1,136.5z"
+      />
+      <polygon points="223.8,61.7 248.9,56.3 248.9,36 223.8,41.3" />
+      <rect x="223.8" y="69.3" width="25.1" height="87.5" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M196.9,76.7l-1.6-7.4h-21.6v87.5h25V97.5c5.9-7.7,15.9-6.3,19-5.2v-23C214.5,68.1,202.8,65.9,196.9,76.7z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M146.9,47.6l-24.4,5.2l-0.1,80.1c0,14.8,11.1,25.7,25.9,25.7c8.2,0,14.2-1.5,17.5-3.3V135c-3.2,1.3-19,5.9-19-8.9V90.6h19V69.3h-19L146.9,47.6z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M79.3,94.7c0-3.9,3.2-5.4,8.5-5.4c7.6,0,17.2,2.3,24.8,6.4V72.2c-8.3-3.3-16.5-4.6-24.8-4.6C67.5,67.6,54,78.2,54,95.9c0,27.6,38,23.2,38,35.1c0,4.6-4,6.1-9.6,6.1c-8.3,0-18.9-3.4-27.3-8v23.8c9.3,4,18.7,5.7,27.3,5.7c20.8,0,35.1-10.3,35.1-28.2C117.4,100.6,79.3,105.9,79.3,94.7z"
+      />
+    </svg>
+  );
+}
diff --git a/claude/CLAUDE-KNOWLEDGE.md b/claude/CLAUDE-KNOWLEDGE.md
index 943980b48d..5166402885 100644
--- a/claude/CLAUDE-KNOWLEDGE.md
+++ b/claude/CLAUDE-KNOWLEDGE.md
@@ -158,6 +158,11 @@ A: In `packages/template/src/components-page/stack-handler-client.tsx`, parse ha
 Q: What is the current `app.urls` contract after deprecating runtime URL mutation?
 A: `app.urls` is now static (`getUrls(...)` only) and no longer injects runtime `after_auth_return_to` / `stack_cross_domain_*` params from `window.location`. For navigation flows, examples and consumers should use `redirectToXyz()` methods instead (for example `redirectToSignIn()` / `redirectToSignOut()`), while tests for hosted flows should assert dynamic params on actual redirect methods, not on `app.urls`.
 
+Q: How should the dashboard onboarding pages get a calmer "Linear-like" transition without changing flow logic?
+A: In `apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client.tsx`, use a shared animated stage wrapper keyed by onboarding status plus a centered hero/surface pattern for each step. The current transition is a 500ms fade-and-drop animation (`opacity` + small negative `translateY`), which keeps step changes feeling deliberate without changing the flow logic.
+
+Q: How can onboarding CTA buttons stay visible without leaving bottom-of-page actions on every step?
+A: In the current onboarding implementation, step actions are rendered by the shared `OnboardingPage` layout rather than a dedicated `OnboardingStickyTop` component in `apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client.tsx`. Keep the page body focused on step content and rely on that shared layout for visible `Continue` / `Do This Later` actions instead of adding duplicated footer CTAs.
 Q: How should user signup time be exposed in JWT claims before production rollout?
 A: Use `signed_up_at` (OIDC-style naming) in access tokens and encode it as Unix seconds in `apps/backend/src/lib/tokens.tsx` (`Math.floor(user.signed_up_at_millis / 1000)`). Since this is pre-prod, the payload schema can require `signed_up_at` directly without a backward-compat optional shim.
 
@@ -264,3 +269,18 @@ A: Inbucket persists mail across runs. `Mailbox.waitForMessagesWithSubject` wait
 
 Q: Why does `@typescript-eslint/no-unnecessary-condition` fire on `props.reset` in Next.js `ErrorBoundary` `errorComponent`?
 A: Next’s typings treat `reset` as always present on the error component props, so `props.reset &&` is redundant; render the reload control unconditionally and call `props.reset()` directly.
+
+Q: Why can dashboard onboarding clicks trigger `Cannot call this function on a Stack app without a persistent token store` dev toasts?
+A: `useOwnedProjects()` creates each `AdminOwnedProject["app"]` with `tokenStore: null`, but `packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts` used to start browser `EventTracker` unconditionally. Clicking onboarding controls queued tracked events, and the flush later threw when analytics tried to resolve a session. Fix by only starting browser event/replay tracking when the app has a persistent token store.
+
+Q: Why can "Link Existing -> Load Repositories" fail even when a GitHub connected-account row exists?
+A: In `link-existing-onboarding.tsx`, GitHub API calls require a usable provider access token from `connectedAccount.getAccessToken()`. If token retrieval fails, the UI intentionally errors with "Could not get a GitHub access token. Reconnect your GitHub account and try again." and repository/branch selectors remain disabled.
+
+Q: What should GitHub `POST /repos/{owner}/{repo}/actions/workflows/{workflow_id}/dispatches` use for `workflow_id`?
+A: Use the workflow **file name** (e.g. `stack-auth-config-sync.yml`), not a path like `.github/workflows/...`. Paths with slashes are rejected or mis-resolved by the API.
+
+Q: How should the dashboard load `stack.config` path suggestions after picking a GitHub branch without stale React state?
+A: Have `loadBranches` return the resolved branch string, then call `loadConfigSuggestions({ repository, branch })` from the Continue handler with those explicit values instead of relying on `setState` having flushed before the tree fetch runs.
+
+Q: How can PR review threads be resolved from the CLI when fixing bot comments?
+A: Use GitHub GraphQL via `gh api graphql` with `resolveReviewThread(input:{threadId: ...})`; list unresolved thread IDs first from `pullRequest.reviewThreads` and then resolve only the IDs tied to fixes you actually made.
diff --git a/packages/stack-cli/src/commands/config-file.ts b/packages/stack-cli/src/commands/config-file.ts
index 7aa81d19ee..06db12f4ba 100644
--- a/packages/stack-cli/src/commands/config-file.ts
+++ b/packages/stack-cli/src/commands/config-file.ts
@@ -1,12 +1,13 @@
 import { Command } from "commander";
 import * as path from "path";
 import * as fs from "fs";
-import { resolveAuth } from "../lib/auth.js";
+import { isProjectAuthWithRefreshToken, isProjectAuthWithSecretServerKey, resolveAuth, type ProjectAuthWithSecretServerKey } from "../lib/auth.js";
 import { getAdminProject } from "../lib/app.js";
 import { CliError } from "../lib/errors.js";
+import type { EnvironmentConfigOverrideOverride } from "@stackframe/stack-shared/dist/config/schema";
 import { detectImportPackageFromDir, renderConfigFileContent } from "@stackframe/stack-shared/dist/config-rendering";
 
-function isPlainObject(value: unknown): value is Record<string, unknown> {
+function isConfigOverride(value: unknown): value is EnvironmentConfigOverrideOverride {
   if (value === null || typeof value !== "object" || Array.isArray(value)) {
     return false;
   }
@@ -14,6 +15,98 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
   return prototype === Object.prototype || prototype === null;
 }
 
+type BranchConfigSourceApi =
+  | { type: "pushed-from-github", owner: string, repo: string, branch: string, commit_hash: string, config_file_path: string }
+  | { type: "pushed-from-unknown" }
+  | { type: "unlinked" };
+
+function parseGitHubRepository(): { owner: string, repo: string } | null {
+  const repository = process.env.GITHUB_REPOSITORY;
+  if (!repository) {
+    return null;
+  }
+
+  const slashIndex = repository.indexOf("/");
+  if (slashIndex <= 0 || slashIndex >= repository.length - 1) {
+    return null;
+  }
+
+  return {
+    owner: repository.slice(0, slashIndex),
+    repo: repository.slice(slashIndex + 1),
+  };
+}
+
+function buildConfigPushSource(configFilePath: string): BranchConfigSourceApi {
+  const repository = parseGitHubRepository();
+  const sha = process.env.GITHUB_SHA;
+  const branch = process.env.GITHUB_REF_NAME;
+
+  if (repository && sha && branch) {
+    return {
+      type: "pushed-from-github",
+      owner: repository.owner,
+      repo: repository.repo,
+      branch,
+      commit_hash: sha,
+      config_file_path: configFilePath,
+    };
+  }
+
+  return { type: "pushed-from-unknown" };
+}
+
+async function pushConfigWithSecretServerKey(
+  auth: ProjectAuthWithSecretServerKey,
+  config: EnvironmentConfigOverrideOverride,
+  source: BranchConfigSourceApi,
+) {
+  const endpoint = `${auth.apiUrl.replace(/\/$/, "")}/api/v1/internal/config/override/branch`;
+  const response = await fetch(endpoint, {
+    method: "PUT",
+    headers: {
+      "content-type": "application/json",
+      "x-stack-project-id": auth.projectId,
+      "x-stack-access-type": "server",
+      "x-stack-secret-server-key": auth.secretServerKey,
+    },
+    body: JSON.stringify({
+      config_string: JSON.stringify(config),
+      source,
+    }),
+  });
+
+  if (response.ok) {
+    return;
+  }
+
+  const responseText = await response.text();
+  const message = responseText.length > 0
+    ? responseText
+    : `Request failed with status ${response.status}.`;
+  throw new CliError(`Failed to push config with STACK_SECRET_SERVER_KEY: ${message}`);
+}
+
+function sourceToSdkSource(source: BranchConfigSourceApi):
+  { type: "pushed-from-github", owner: string, repo: string, branch: string, commitHash: string, configFilePath: string }
+  | { type: "pushed-from-unknown" }
+  | { type: "unlinked" } {
+  if (source.type === "pushed-from-github") {
+    return {
+      type: "pushed-from-github",
+      owner: source.owner,
+      repo: source.repo,
+      branch: source.branch,
+      commitHash: source.commit_hash,
+      configFilePath: source.config_file_path,
+    };
+  }
+  if (source.type === "pushed-from-unknown") {
+    return { type: "pushed-from-unknown" };
+  }
+  return { type: "unlinked" };
+}
+
 export function registerConfigCommand(program: Command) {
   const config = program
     .command("config")
@@ -27,6 +120,9 @@ export function registerConfigCommand(program: Command) {
     .action(async (opts) => {
       const flags = program.opts();
       const auth = resolveAuth(flags);
+      if (!isProjectAuthWithRefreshToken(auth)) {
+        throw new CliError("`stack config pull` requires `stack login`. Remove STACK_SECRET_SERVER_KEY and try again.");
+      }
       const project = await getAdminProject(auth);
 
       const configOverride = await project.getConfigOverride("branch");
@@ -55,7 +151,6 @@ export function registerConfigCommand(program: Command) {
     .action(async (opts) => {
       const flags = program.opts();
       const auth = resolveAuth(flags);
-      const project = await getAdminProject(auth);
 
       const filePath = path.resolve(opts.configFile);
       const ext = path.extname(filePath);
@@ -73,12 +168,25 @@ export function registerConfigCommand(program: Command) {
       const configModule: { config?: unknown } = await jiti.import(filePath);
 
       const config = configModule.config;
-      if (!isPlainObject(config)) {
+      if (!isConfigOverride(config)) {
         const examplePkg = detectImportPackageFromDir(path.dirname(filePath)) ?? "@stackframe/js";
         throw new CliError(`Config file must export a plain \`config\` object. Example: import type { StackConfig } from "${examplePkg}"; export const config: StackConfig = { ... };`);
       }
 
-      await project.replaceConfigOverride("branch", config);
+      const source = buildConfigPushSource(opts.configFile);
+
+      if (isProjectAuthWithSecretServerKey(auth)) {
+        await pushConfigWithSecretServerKey(auth, config, source);
+      } else {
+        if (!isProjectAuthWithRefreshToken(auth)) {
+          throw new CliError("`stack config push` requires either STACK_SECRET_SERVER_KEY or `stack login`.");
+        }
+        const project = await getAdminProject(auth);
+        await project.pushConfig(config, {
+          source: sourceToSdkSource(source),
+        });
+      }
+
       console.log("Config pushed successfully.");
     });
 }
diff --git a/packages/stack-cli/src/commands/exec.ts b/packages/stack-cli/src/commands/exec.ts
index 44d177db2f..b09c9ae9c0 100644
--- a/packages/stack-cli/src/commands/exec.ts
+++ b/packages/stack-cli/src/commands/exec.ts
@@ -1,5 +1,5 @@
 import { Command } from "commander";
-import { resolveAuth } from "../lib/auth.js";
+import { isProjectAuthWithRefreshToken, resolveAuth } from "../lib/auth.js";
 import { getAdminProject } from "../lib/app.js";
 import { CliError } from "../lib/errors.js";
 
@@ -29,6 +29,9 @@ export function registerExecCommand(program: Command) {
 
       const flags = program.opts();
       const auth = resolveAuth(flags);
+      if (!isProjectAuthWithRefreshToken(auth)) {
+        throw new CliError("`stack exec` requires `stack login`. Remove STACK_SECRET_SERVER_KEY and try again.");
+      }
       const project = await getAdminProject(auth);
 
       // eslint-disable-next-line @typescript-eslint/no-implied-eval
diff --git a/packages/stack-cli/src/lib/app.ts b/packages/stack-cli/src/lib/app.ts
index 56e042ee7d..0ce8f9e2b4 100644
--- a/packages/stack-cli/src/lib/app.ts
+++ b/packages/stack-cli/src/lib/app.ts
@@ -2,7 +2,7 @@ import { StackClientApp } from "@stackframe/js";
 import type { CurrentInternalUser, AdminOwnedProject } from "@stackframe/js";
 import { AuthError } from "./errors.js";
 import { DEFAULT_PUBLISHABLE_CLIENT_KEY } from "./auth.js";
-import type { SessionAuth, ProjectAuth } from "./auth.js";
+import type { SessionAuth, ProjectAuthWithRefreshToken } from "./auth.js";
 
 export function getInternalApp(auth: SessionAuth): StackClientApp<true, "internal"> {
   return new StackClientApp({
@@ -23,7 +23,7 @@ export async function getInternalUser(auth: SessionAuth): Promise<CurrentInterna
   return user as CurrentInternalUser;
 }
 
-export async function getAdminProject(auth: ProjectAuth): Promise<AdminOwnedProject> {
+export async function getAdminProject(auth: ProjectAuthWithRefreshToken): Promise<AdminOwnedProject> {
   const user = await getInternalUser(auth);
   const projects = await user.listOwnedProjects();
   const project = projects.find((p) => p.id === auth.projectId);
diff --git a/packages/stack-cli/src/lib/auth.ts b/packages/stack-cli/src/lib/auth.ts
index 7e593acb7b..303fce1b14 100644
--- a/packages/stack-cli/src/lib/auth.ts
+++ b/packages/stack-cli/src/lib/auth.ts
@@ -18,7 +18,16 @@ export type SessionAuth = LoginConfig & {
   refreshToken: string,
 };
 
-export type ProjectAuth = SessionAuth & {
+export type ProjectAuthWithRefreshToken = SessionAuth & {
+  projectId: string,
+};
+
+export type ProjectAuthWithSecretServerKey = LoginConfig & {
+  projectId: string,
+  secretServerKey: string,
+};
+
+export type ProjectAuth = (ProjectAuthWithRefreshToken | ProjectAuthWithSecretServerKey) & {
   projectId: string,
 };
 
@@ -43,6 +52,10 @@ function resolveRefreshToken(): string {
   return token;
 }
 
+function resolveSecretServerKey(): string | null {
+  return process.env.STACK_SECRET_SERVER_KEY ?? null;
+}
+
 function resolveProjectId(flags: Flags): string {
   const projectId = flags.projectId ?? process.env.STACK_PROJECT_ID;
   if (!projectId) {
@@ -66,8 +79,25 @@ export function resolveSessionAuth(flags: Flags): SessionAuth {
 }
 
 export function resolveAuth(flags: Flags): ProjectAuth {
+  const secretServerKey = resolveSecretServerKey();
+  if (secretServerKey) {
+    return {
+      ...resolveLoginConfig(flags),
+      projectId: resolveProjectId(flags),
+      secretServerKey,
+    };
+  }
+
   return {
     ...resolveSessionAuth(flags),
     projectId: resolveProjectId(flags),
   };
 }
+
+export function isProjectAuthWithSecretServerKey(auth: ProjectAuth): auth is ProjectAuthWithSecretServerKey {
+  return "secretServerKey" in auth;
+}
+
+export function isProjectAuthWithRefreshToken(auth: ProjectAuth): auth is ProjectAuthWithRefreshToken {
+  return "refreshToken" in auth;
+}
diff --git a/packages/stack-shared/src/schema-fields.ts b/packages/stack-shared/src/schema-fields.ts
index d5322384d0..26ffa549de 100644
--- a/packages/stack-shared/src/schema-fields.ts
+++ b/packages/stack-shared/src/schema-fields.ts
@@ -565,6 +565,7 @@ export const projectOnboardingStatusValues = [
   "domain_setup",
   "email_theme_setup",
   "payments_setup",
+  "welcome",
   "completed",
 ] as const;
 export type ProjectOnboardingStatus = typeof projectOnboardingStatusValues[number];
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dd890a4bd2..19288c9406 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -544,6 +544,9 @@ importers:
       jose:
         specifier: ^6.1.3
         version: 6.1.3
+      libsodium-wrappers:
+        specifier: ^0.8.2
+        version: 0.8.2
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
@@ -950,7 +953,7 @@ importers:
     devDependencies:
       mint:
         specifier: ^4.2.487
-        version: 4.2.487(@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/node@24.9.2)(@types/react@18.3.12)(encoding@0.1.13)(react-dom@19.2.3(react@19.2.3))(tsx@4.19.3)(typescript@5.9.3)(yaml@2.6.0)
+        version: 4.2.487(@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/node@20.17.6)(@types/react@18.3.12)(encoding@0.1.13)(react-dom@19.2.3(react@19.2.3))(tsx@4.19.3)(typescript@5.9.3)(yaml@2.6.0)
 
   examples/cjs-test:
     dependencies:
@@ -1498,10 +1501,10 @@ importers:
         version: link:../../packages/stack
       '@supabase/ssr':
         specifier: latest
-        version: 0.10.0(@supabase/supabase-js@2.101.1)
+        version: 0.10.0(@supabase/supabase-js@2.102.1)
       '@supabase/supabase-js':
         specifier: latest
-        version: 2.101.1
+        version: 2.102.1
       jose:
         specifier: ^5.2.2
         version: 5.6.3
@@ -9760,23 +9763,23 @@ packages:
     resolution: {integrity: sha512-SXuhqhuR5FXaYgKTXzZJeqtVA6JKb9IZWaGeEUxHHiOcFy2p51wccO72bYpXwoK4D5pzQOIYLTuAc7etxyMmwg==}
     engines: {node: '>=12.16'}
 
-  '@supabase/auth-js@2.101.1':
-    resolution: {integrity: sha512-Kd0Wey+RkFHgyVep7adS6UOE2pN6MJ3mZ32PAXSvfw6IjUkFRC7IQpdZZjUOcUe5pXr1ejufCRgF6lsGINe4Tw==}
+  '@supabase/auth-js@2.102.1':
+    resolution: {integrity: sha512-2uH2WB0H98TOGDtaFWhxIcR42Dro/VB7VDZanz/4bVJsqioIue1m3TUqu3xciDm2W9r+1LXQvYNsYbQfWmD+uQ==}
     engines: {node: '>=20.0.0'}
 
-  '@supabase/functions-js@2.101.1':
-    resolution: {integrity: sha512-OZWU7YtaG+NNNFZK8p/FuJ6gpq7pFyrG2fLOopP73HAIDHDGpOttPJapvO8ADu3RkqfQfkwrB354vPkSBbZ20A==}
+  '@supabase/functions-js@2.102.1':
+    resolution: {integrity: sha512-UcrcKTPnAIo+Yp9Jjq9XXwFbsmgRYY637mwka9ZjmTIWcX/xr1pote4OVvaGQycVY1KTiQgjMvpC0Q0yJhRq3w==}
     engines: {node: '>=20.0.0'}
 
   '@supabase/phoenix@0.4.0':
     resolution: {integrity: sha512-RHSx8bHS02xwfHdAbX5Lpbo6PXbgyf7lTaXTlwtFDPwOIw64NnVRwFAXGojHhjtVYI+PEPNSWwkL90f4agN3bw==}
 
-  '@supabase/postgrest-js@2.101.1':
-    resolution: {integrity: sha512-UW1RajH5jbZoK+ldAJ1I6VZ+HWwZ2oaKjEQ6Gn+AQ67CHQVxGl8wNQoLYyumbyaExm41I+wn7arulcY1eHeZJw==}
+  '@supabase/postgrest-js@2.102.1':
+    resolution: {integrity: sha512-InLvXKAYf8BIqiv9jWOYudWB3rU8A9uMbcip5BQ5sLLNPrbO1Ekkr79OvlhZBgMNSppxVyC7wPPGzLxMcTZhlA==}
     engines: {node: '>=20.0.0'}
 
-  '@supabase/realtime-js@2.101.1':
-    resolution: {integrity: sha512-Oa6dno0OB9I+hv5do5zsZHbFu41ViZnE9IWjmkeeF/8fPmB5fWoHGqeTYEC3/0DAgtpUoFJa4FpvzFH0SBHo1Q==}
+  '@supabase/realtime-js@2.102.1':
+    resolution: {integrity: sha512-h2fCumib/v6u7XMwSPgxnpfimjX4xCEayUHrxWLC7UurfQjUZJ0pmJDgm6yj80DnUerxuulRghwm5zXYysFG/Q==}
     engines: {node: '>=20.0.0'}
 
   '@supabase/ssr@0.10.0':
@@ -9784,12 +9787,12 @@ packages:
     peerDependencies:
       '@supabase/supabase-js': ^2.100.1
 
-  '@supabase/storage-js@2.101.1':
-    resolution: {integrity: sha512-WhTaUOBgeEvnKLy95Cdlp6+D5igSF/65yC727w1olxbet5nzUvMlajKUWyzNtQu2efrz2cQ7FcdVBdQqgT9YKQ==}
+  '@supabase/storage-js@2.102.1':
+    resolution: {integrity: sha512-eCL9T4Xpe40nmKlkUJ7Zq/hk34db1xPiT0WL3Iv5MbJqHuCAe5TxhV8Rjqd6DNZrzjtfYObZtYl9jKJaHrivqw==}
     engines: {node: '>=20.0.0'}
 
-  '@supabase/supabase-js@2.101.1':
-    resolution: {integrity: sha512-Jnhm3LfuACwjIzvk2pfUbGQn7pa7hi6MFzfSyPrRYWVCCu69RPLCFyHSBl7HSBwadbQ3UZOznnD3gPca3ePrRA==}
+  '@supabase/supabase-js@2.102.1':
+    resolution: {integrity: sha512-bChxPVeLDnYN9M2d/u4fXsvylwSQG5grAl+HN8f+ZD9a9PuVU+Ru+xGmEsk+b9Iz3rJC9ZQnQUJYQ28fApdWYA==}
     engines: {node: '>=20.0.0'}
 
   '@sveltejs/sv-utils@0.0.3':
@@ -13398,6 +13401,7 @@ packages:
 
   freestyle-sandboxes@0.1.6:
     resolution: {integrity: sha512-zfyJy+DgmheFjCAPYMklo7rpzvuxNP46rB0a9WfNBEmitYGE23nlbjyTy8qdrmVuCVCoMIDQQzzJRkyuh0Szqg==}
+    deprecated: This package has been deprecated. Please use freestyle instead.
 
   fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
@@ -14766,6 +14770,12 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  libsodium-wrappers@0.8.2:
+    resolution: {integrity: sha512-VFLmfxkxo+U9q60tjcnSomQBRx2UzlRjKWJqvB4K1pUqsMQg4cu3QXA2nrcsj9A1qRsnJBbi2Ozx1hsiDoCkhw==}
+
+  libsodium@0.8.2:
+    resolution: {integrity: sha512-TsnGYMoZtpweT+kR+lOv5TVsnJ/9U0FZOsLFzFOMWmxqOAYXjX3fsrPAW+i1LthgDKXJnI9A8dWEanT1tnJKIw==}
+
   lightningcss-darwin-arm64@1.30.1:
     resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
     engines: {node: '>= 12.0.0'}
@@ -22478,16 +22488,6 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.17.6
 
-  '@inquirer/checkbox@4.3.2(@types/node@24.9.2)':
-    dependencies:
-      '@inquirer/ansi': 1.0.2
-      '@inquirer/core': 10.3.2(@types/node@24.9.2)
-      '@inquirer/figures': 1.0.15
-      '@inquirer/type': 3.0.10(@types/node@24.9.2)
-      yoctocolors-cjs: 2.1.3
-    optionalDependencies:
-      '@types/node': 24.9.2
-
   '@inquirer/confirm@5.1.21(@types/node@20.17.6)':
     dependencies:
       '@inquirer/core': 10.3.2(@types/node@20.17.6)
@@ -22495,13 +22495,6 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.17.6
 
-  '@inquirer/confirm@5.1.21(@types/node@24.9.2)':
-    dependencies:
-      '@inquirer/core': 10.3.2(@types/node@24.9.2)
-      '@inquirer/type': 3.0.10(@types/node@24.9.2)
-    optionalDependencies:
-      '@types/node': 24.9.2
-
   '@inquirer/core@10.3.2(@types/node@20.17.6)':
     dependencies:
       '@inquirer/ansi': 1.0.2
@@ -22515,19 +22508,6 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.17.6
 
-  '@inquirer/core@10.3.2(@types/node@24.9.2)':
-    dependencies:
-      '@inquirer/ansi': 1.0.2
-      '@inquirer/figures': 1.0.15
-      '@inquirer/type': 3.0.10(@types/node@24.9.2)
-      cli-width: 4.1.0
-      mute-stream: 2.0.0
-      signal-exit: 4.1.0
-      wrap-ansi: 6.2.0
-      yoctocolors-cjs: 2.1.3
-    optionalDependencies:
-      '@types/node': 24.9.2
-
   '@inquirer/editor@4.2.23(@types/node@20.17.6)':
     dependencies:
       '@inquirer/core': 10.3.2(@types/node@20.17.6)
@@ -22536,14 +22516,6 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.17.6
 
-  '@inquirer/editor@4.2.23(@types/node@24.9.2)':
-    dependencies:
-      '@inquirer/core': 10.3.2(@types/node@24.9.2)
-      '@inquirer/external-editor': 1.0.3(@types/node@24.9.2)
-      '@inquirer/type': 3.0.10(@types/node@24.9.2)
-    optionalDependencies:
-      '@types/node': 24.9.2
-
   '@inquirer/expand@4.0.23(@types/node@20.17.6)':
     dependencies:
       '@inquirer/core': 10.3.2(@types/node@20.17.6)
@@ -22552,14 +22524,6 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.17.6
 
-  '@inquirer/expand@4.0.23(@types/node@24.9.2)':
-    dependencies:
-      '@inquirer/core': 10.3.2(@types/node@24.9.2)
-      '@inquirer/type': 3.0.10(@types/node@24.9.2)
-      yoctocolors-cjs: 2.1.3
-    optionalDependencies:
-      '@types/node': 24.9.2
-
   '@inquirer/external-editor@1.0.3(@types/node@20.17.6)':
     dependencies:
       chardet: 2.1.1
@@ -22567,13 +22531,6 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.17.6
 
-  '@inquirer/external-editor@1.0.3(@types/node@24.9.2)':
-    dependencies:
-      chardet: 2.1.1
-      iconv-lite: 0.7.0
-    optionalDependencies:
-      '@types/node': 24.9.2
-
   '@inquirer/figures@1.0.15': {}
 
   '@inquirer/figures@1.0.3': {}
@@ -22585,13 +22542,6 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.17.6
 
-  '@inquirer/input@4.3.1(@types/node@24.9.2)':
-    dependencies:
-      '@inquirer/core': 10.3.2(@types/node@24.9.2)
-      '@inquirer/type': 3.0.10(@types/node@24.9.2)
-    optionalDependencies:
-      '@types/node': 24.9.2
-
   '@inquirer/number@3.0.23(@types/node@20.17.6)':
     dependencies:
       '@inquirer/core': 10.3.2(@types/node@20.17.6)
@@ -22599,13 +22549,6 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.17.6
 
-  '@inquirer/number@3.0.23(@types/node@24.9.2)':
-    dependencies:
-      '@inquirer/core': 10.3.2(@types/node@24.9.2)
-      '@inquirer/type': 3.0.10(@types/node@24.9.2)
-    optionalDependencies:
-      '@types/node': 24.9.2
-
   '@inquirer/password@4.0.23(@types/node@20.17.6)':
     dependencies:
       '@inquirer/ansi': 1.0.2
@@ -22614,14 +22557,6 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.17.6
 
-  '@inquirer/password@4.0.23(@types/node@24.9.2)':
-    dependencies:
-      '@inquirer/ansi': 1.0.2
-      '@inquirer/core': 10.3.2(@types/node@24.9.2)
-      '@inquirer/type': 3.0.10(@types/node@24.9.2)
-    optionalDependencies:
-      '@types/node': 24.9.2
-
   '@inquirer/prompts@7.10.1(@types/node@20.17.6)':
     dependencies:
       '@inquirer/checkbox': 4.3.2(@types/node@20.17.6)
@@ -22637,35 +22572,20 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.17.6
 
-  '@inquirer/prompts@7.10.1(@types/node@24.9.2)':
+  '@inquirer/prompts@7.9.0(@types/node@20.17.6)':
     dependencies:
-      '@inquirer/checkbox': 4.3.2(@types/node@24.9.2)
-      '@inquirer/confirm': 5.1.21(@types/node@24.9.2)
-      '@inquirer/editor': 4.2.23(@types/node@24.9.2)
-      '@inquirer/expand': 4.0.23(@types/node@24.9.2)
-      '@inquirer/input': 4.3.1(@types/node@24.9.2)
-      '@inquirer/number': 3.0.23(@types/node@24.9.2)
-      '@inquirer/password': 4.0.23(@types/node@24.9.2)
-      '@inquirer/rawlist': 4.1.11(@types/node@24.9.2)
-      '@inquirer/search': 3.2.2(@types/node@24.9.2)
-      '@inquirer/select': 4.4.2(@types/node@24.9.2)
-    optionalDependencies:
-      '@types/node': 24.9.2
-
-  '@inquirer/prompts@7.9.0(@types/node@24.9.2)':
-    dependencies:
-      '@inquirer/checkbox': 4.3.2(@types/node@24.9.2)
-      '@inquirer/confirm': 5.1.21(@types/node@24.9.2)
-      '@inquirer/editor': 4.2.23(@types/node@24.9.2)
-      '@inquirer/expand': 4.0.23(@types/node@24.9.2)
-      '@inquirer/input': 4.3.1(@types/node@24.9.2)
-      '@inquirer/number': 3.0.23(@types/node@24.9.2)
-      '@inquirer/password': 4.0.23(@types/node@24.9.2)
-      '@inquirer/rawlist': 4.1.11(@types/node@24.9.2)
-      '@inquirer/search': 3.2.2(@types/node@24.9.2)
-      '@inquirer/select': 4.4.2(@types/node@24.9.2)
+      '@inquirer/checkbox': 4.3.2(@types/node@20.17.6)
+      '@inquirer/confirm': 5.1.21(@types/node@20.17.6)
+      '@inquirer/editor': 4.2.23(@types/node@20.17.6)
+      '@inquirer/expand': 4.0.23(@types/node@20.17.6)
+      '@inquirer/input': 4.3.1(@types/node@20.17.6)
+      '@inquirer/number': 3.0.23(@types/node@20.17.6)
+      '@inquirer/password': 4.0.23(@types/node@20.17.6)
+      '@inquirer/rawlist': 4.1.11(@types/node@20.17.6)
+      '@inquirer/search': 3.2.2(@types/node@20.17.6)
+      '@inquirer/select': 4.4.2(@types/node@20.17.6)
     optionalDependencies:
-      '@types/node': 24.9.2
+      '@types/node': 20.17.6
 
   '@inquirer/rawlist@4.1.11(@types/node@20.17.6)':
     dependencies:
@@ -22675,14 +22595,6 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.17.6
 
-  '@inquirer/rawlist@4.1.11(@types/node@24.9.2)':
-    dependencies:
-      '@inquirer/core': 10.3.2(@types/node@24.9.2)
-      '@inquirer/type': 3.0.10(@types/node@24.9.2)
-      yoctocolors-cjs: 2.1.3
-    optionalDependencies:
-      '@types/node': 24.9.2
-
   '@inquirer/search@3.2.2(@types/node@20.17.6)':
     dependencies:
       '@inquirer/core': 10.3.2(@types/node@20.17.6)
@@ -22692,15 +22604,6 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.17.6
 
-  '@inquirer/search@3.2.2(@types/node@24.9.2)':
-    dependencies:
-      '@inquirer/core': 10.3.2(@types/node@24.9.2)
-      '@inquirer/figures': 1.0.15
-      '@inquirer/type': 3.0.10(@types/node@24.9.2)
-      yoctocolors-cjs: 2.1.3
-    optionalDependencies:
-      '@types/node': 24.9.2
-
   '@inquirer/select@4.4.2(@types/node@20.17.6)':
     dependencies:
       '@inquirer/ansi': 1.0.2
@@ -22711,24 +22614,10 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.17.6
 
-  '@inquirer/select@4.4.2(@types/node@24.9.2)':
-    dependencies:
-      '@inquirer/ansi': 1.0.2
-      '@inquirer/core': 10.3.2(@types/node@24.9.2)
-      '@inquirer/figures': 1.0.15
-      '@inquirer/type': 3.0.10(@types/node@24.9.2)
-      yoctocolors-cjs: 2.1.3
-    optionalDependencies:
-      '@types/node': 24.9.2
-
   '@inquirer/type@3.0.10(@types/node@20.17.6)':
     optionalDependencies:
       '@types/node': 20.17.6
 
-  '@inquirer/type@3.0.10(@types/node@24.9.2)':
-    optionalDependencies:
-      '@types/node': 24.9.2
-
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -22866,9 +22755,9 @@ snapshots:
     dependencies:
       langium: 3.3.1
 
-  '@mintlify/cli@4.0.1090(@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/node@24.9.2)(@types/react@18.3.12)(encoding@0.1.13)(react-dom@19.2.3(react@19.2.3))(tsx@4.19.3)(typescript@5.9.3)(yaml@2.6.0)':
+  '@mintlify/cli@4.0.1090(@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/node@20.17.6)(@types/react@18.3.12)(encoding@0.1.13)(react-dom@19.2.3(react@19.2.3))(tsx@4.19.3)(typescript@5.9.3)(yaml@2.6.0)':
     dependencies:
-      '@inquirer/prompts': 7.9.0(@types/node@24.9.2)
+      '@inquirer/prompts': 7.9.0(@types/node@20.17.6)
       '@mintlify/common': 1.0.835(@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react@18.3.12)(encoding@0.1.13)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tsx@4.19.3)(typescript@5.9.3)(yaml@2.6.0)
       '@mintlify/link-rot': 3.0.1010(@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react@18.3.12)(encoding@0.1.13)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tsx@4.19.3)(typescript@5.9.3)(yaml@2.6.0)
       '@mintlify/prebuild': 1.0.977(@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react@18.3.12)(encoding@0.1.13)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tsx@4.19.3)(typescript@5.9.3)(yaml@2.6.0)
@@ -22881,7 +22770,7 @@ snapshots:
       front-matter: 4.0.2
       fs-extra: 11.2.0
       ink: 6.3.0(@types/react@18.3.12)(react@19.2.3)
-      inquirer: 12.3.0(@types/node@24.9.2)
+      inquirer: 12.3.0(@types/node@20.17.6)
       js-yaml: 4.1.0
       mdast-util-mdx-jsx: 3.2.0
       open: 8.4.2
@@ -29249,21 +29138,21 @@ snapshots:
 
   '@stripe/stripe-js@7.7.0': {}
 
-  '@supabase/auth-js@2.101.1':
+  '@supabase/auth-js@2.102.1':
     dependencies:
       tslib: 2.8.1
 
-  '@supabase/functions-js@2.101.1':
+  '@supabase/functions-js@2.102.1':
     dependencies:
       tslib: 2.8.1
 
   '@supabase/phoenix@0.4.0': {}
 
-  '@supabase/postgrest-js@2.101.1':
+  '@supabase/postgrest-js@2.102.1':
     dependencies:
       tslib: 2.8.1
 
-  '@supabase/realtime-js@2.101.1':
+  '@supabase/realtime-js@2.102.1':
     dependencies:
       '@supabase/phoenix': 0.4.0
       '@types/ws': 8.18.1
@@ -29273,23 +29162,23 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@supabase/ssr@0.10.0(@supabase/supabase-js@2.101.1)':
+  '@supabase/ssr@0.10.0(@supabase/supabase-js@2.102.1)':
     dependencies:
-      '@supabase/supabase-js': 2.101.1
+      '@supabase/supabase-js': 2.102.1
       cookie: 1.0.2
 
-  '@supabase/storage-js@2.101.1':
+  '@supabase/storage-js@2.102.1':
     dependencies:
       iceberg-js: 0.8.1
       tslib: 2.8.1
 
-  '@supabase/supabase-js@2.101.1':
+  '@supabase/supabase-js@2.102.1':
     dependencies:
-      '@supabase/auth-js': 2.101.1
-      '@supabase/functions-js': 2.101.1
-      '@supabase/postgrest-js': 2.101.1
-      '@supabase/realtime-js': 2.101.1
-      '@supabase/storage-js': 2.101.1
+      '@supabase/auth-js': 2.102.1
+      '@supabase/functions-js': 2.102.1
+      '@supabase/postgrest-js': 2.102.1
+      '@supabase/realtime-js': 2.102.1
+      '@supabase/storage-js': 2.102.1
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
@@ -30017,6 +29906,7 @@ snapshots:
   '@types/node@24.9.2':
     dependencies:
       undici-types: 7.16.0
+    optional: true
 
   '@types/nodemailer@6.4.15':
     dependencies:
@@ -33092,7 +32982,7 @@ snapshots:
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.56.1(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.56.1(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.56.1(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.2(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.1.0(eslint@8.57.1)
@@ -35159,12 +35049,12 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
-  inquirer@12.3.0(@types/node@24.9.2):
+  inquirer@12.3.0(@types/node@20.17.6):
     dependencies:
-      '@inquirer/core': 10.3.2(@types/node@24.9.2)
-      '@inquirer/prompts': 7.10.1(@types/node@24.9.2)
-      '@inquirer/type': 3.0.10(@types/node@24.9.2)
-      '@types/node': 24.9.2
+      '@inquirer/core': 10.3.2(@types/node@20.17.6)
+      '@inquirer/prompts': 7.10.1(@types/node@20.17.6)
+      '@inquirer/type': 3.0.10(@types/node@20.17.6)
+      '@types/node': 20.17.6
       ansi-escapes: 4.3.2
       mute-stream: 2.0.0
       run-async: 3.0.0
@@ -35775,6 +35665,12 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  libsodium-wrappers@0.8.2:
+    dependencies:
+      libsodium: 0.8.2
+
+  libsodium@0.8.2: {}
+
   lightningcss-darwin-arm64@1.30.1:
     optional: true
 
@@ -36641,9 +36537,9 @@ snapshots:
     dependencies:
       minipass: 7.1.2
 
-  mint@4.2.487(@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/node@24.9.2)(@types/react@18.3.12)(encoding@0.1.13)(react-dom@19.2.3(react@19.2.3))(tsx@4.19.3)(typescript@5.9.3)(yaml@2.6.0):
+  mint@4.2.487(@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/node@20.17.6)(@types/react@18.3.12)(encoding@0.1.13)(react-dom@19.2.3(react@19.2.3))(tsx@4.19.3)(typescript@5.9.3)(yaml@2.6.0):
     dependencies:
-      '@mintlify/cli': 4.0.1090(@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/node@24.9.2)(@types/react@18.3.12)(encoding@0.1.13)(react-dom@19.2.3(react@19.2.3))(tsx@4.19.3)(typescript@5.9.3)(yaml@2.6.0)
+      '@mintlify/cli': 4.0.1090(@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/node@20.17.6)(@types/react@18.3.12)(encoding@0.1.13)(react-dom@19.2.3(react@19.2.3))(tsx@4.19.3)(typescript@5.9.3)(yaml@2.6.0)
     transitivePeerDependencies:
       - '@radix-ui/react-popover'
       - '@types/node'
@@ -40784,7 +40680,8 @@ snapshots:
 
   undici-types@6.21.0: {}
 
-  undici-types@7.16.0: {}
+  undici-types@7.16.0:
+    optional: true
 
   undici@6.19.8: {}