Multi-step setup shows progress to the user

Users who don't know how many steps remain in an onboarding flow abandon earlier and report higher frustration scores. WCAG 2.2 SC 2.4.8 (Location) requires that users know where they are within a set of pages — a multi-step onboarding without a step counter violates this directly. Beyond compliance, absence of a progress signal is one of the top controllable causes of onboarding abandonment: users quit because they don't know when it will end, not because the steps are too hard.

Add a step indicator to src/app/(app)/onboarding/layout.tsx that renders on every step transition:

<div className="flex items-center gap-2 mb-6">
  {steps.map((step, i) => (
    <div
      key={step.id}
      className={cn("h-2 flex-1 rounded", i <= currentStep ? "bg-primary" : "bg-muted")}
    />
  ))}
  <span className="text-sm text-muted-foreground ml-2">
    Step {currentStep + 1} of {steps.length}
  </span>
</div>

The indicator must update on every step change. A static label showing the total without the current position does not satisfy the requirement.

• ID: saas-onboarding.onboarding-ux.progress-indicator

• Severity: low

• What to look for: Count the total onboarding steps. If the application has more than 1 screen between signup and dashboard, look for a progress indicator — a step counter ("Step 2 of 4"), a progress bar, a checklist of steps with completion states, or numbered step labels.

• Pass criteria: If the onboarding has more than 1 step, a progress indicator is visible that tells the user how many steps exist and which step they are on. The indicator must update at least 1 time per step transition.

• Fail criteria: A multi-step onboarding flow exists with no progress indicator. Users have no way to know how many more steps remain.

• Skip (N/A) when: The onboarding flow is a single screen (no multi-step flow) or no onboarding flow exists.

• Detail on fail: "Onboarding has [N] steps with no step counter, progress bar, or step indicator. Users cannot tell how many steps remain, increasing the likelihood of abandonment."

• Remediation: In src/app/(app)/onboarding/layout.tsx, add a step indicator:

  <div className="flex items-center gap-2 mb-6">
    {steps.map((step, i) => (
      <div key={step.id} className={cn("h-2 flex-1 rounded", i <= currentStep ? "bg-primary" : "bg-muted")} />
    ))}
    <span className="text-sm text-muted-foreground ml-2">Step {currentStep + 1} of {steps.length}</span>
  </div>