feat(frontend): redesign onboarding wizard

[NicholasKissel]

Redesigns the Rivet onboarding wizard (cloud/compute flavor) for clearer information architecture, a more cohesive look, and smoother step transitions.

Structure

• Consistent step anatomy: every step now renders progress → title → one-line description → content → labeled action. Added a description slot to StepperForm (singlePage) so the intro line is structural instead of ad-hoc per step.
• Framed the wizard in a card so it matches the create-project screen and the rest of the dashboard instead of floating on bare background.
• Removed the dead "Explore Rivet Actors" carousel step.

Per-step

• Install: reframed as skill + package — two required, numbered parts (not an either/or), using the existing StepNumber pattern. One consistent command treatment.
• Build your first Actor: fixed the agent-prompt banner copy (it referenced "deploy to Rivet Compute" on a local-dev step); framed agent vs. quickstart as recommended + alternative.
• Where to deploy: title/description normalized; Beta badge wired on provider cards.
• Connect your backend: explicit "automatic (agent) / or set it up manually" framing so the agent banner and numbered steps stop competing; added a Serverless vs Runner explainer.
• Verify deployment: replaced the dead-air "Waiting…" line with a status checklist (spinner/check rows) and fixed the CTA hierarchy (demoted "Skip to dashboard").

Animation

• Smooth height transition: a measured AnimatedHeight wrapper animates the card between differently-sized steps instead of snapping.
• Step transition is a cross-fade (a horizontal slide fought the height clip and got cut off at the edges).
• Removed the now-dead direction machinery (useStepperDirection, custom props) and the unused isLastVisible prop on StepPanel.

Misc

• Normalized provider logos to a consistent size-5 box (the Rivet mark's aspect ratio didn't match the others under the old fixed-width sizing).
• Sentence-case copy, consistent spacing, labeled "Continue" buttons.

🤖 Generated with Claude Code

[NicholasKissel]

• feat(frontend): redesign onboarding wizard #5116 : 2 dependent PRs (#5121 , #5135 ) 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[railway-app]

🚅 Deployed to the rivet-pr-5116 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
kitchen-sink	🕒 Building (View Logs)	Web	Jun 4, 2026 at 2:31 pm
frontend-cloud	😴 Sleeping (View Logs)	Web	Jun 4, 2026 at 12:48 pm
website	😴 Sleeping (View Logs)	Web	May 30, 2026 at 5:24 am
ladle	✅ Success (View Logs)	Web	May 28, 2026 at 8:33 pm
frontend-inspector	❌ Build Failed (View Logs)	Web	May 28, 2026 at 8:31 pm
mcp-hub	✅ Success (View Logs)	Web	May 28, 2026 at 8:31 pm

[claude]

PR Review: feat(frontend): redesign onboarding wizard

Overview

This PR redesigns the onboarding wizard with a card-framed layout, structured step anatomy (progress → title → description → content → action), cross-fade animations with height interpolation, and a removed dead "Explore Rivet Actors" carousel step. The changes are well-scoped and clearly motivated.

---

Positives

• Dead code removed cleanly: useStepperDirection, isLastVisible, ExploreRivet, the explore step, and the wide layout machinery are all gone without stubs or backwards-compat shims.
• Error handling added to mutateAsyncManagedPool: The try/catch with a toast notification is a real improvement — previously a pool creation failure would silently swallow the error and block the user.
• containsSecret propagation is correct: Both RivetCopyAgentInstructionsButton and OtherCopyAgentInstructionsButton now pass containsSecret={true}. Good security UX.
• AnimatedHeight is well-implemented: useLayoutEffect + ResizeObserver with cleanup, combined with mode="wait" on AnimatePresence, avoids the double-measure problem during exit/enter overlap.
• Comments explain the WHY on the cross-fade decision and AnimatedHeight contract — follows project conventions.
• Accessible progress bar: role="progressbar" with aria-valuemin/max/now/text on OnboardingProgress.

---

Issues

Minor

• <span /> layout spacer (getting-started.tsx ~line 1053): When deploymentUrl is null, an empty <span /> is rendered to preserve the flex layout. This is fragile. Consider adjusting the flex layout so the button trio doesn't rely on an invisible spacer for alignment.

• (step as Step).description cast (stepper-form.tsx ~line 154): The cast is needed because the Stepperize library's type doesn't carry the custom description field. Acceptable given the library constraint, but a short comment would clarify this is a library limitation rather than a type escape hatch.

• CommandBox — unhandled clipboard promise: navigator.clipboard.writeText(command) returns a Promise that is not awaited or .catch-ed. Clipboard writes can fail (permissions denied, non-HTTPS). Since CommandBox is a new shared component it's a good place to handle this:

  navigator.clipboard.writeText(command).then(
    () => toast.success("Copied to clipboard"),
    () => toast.error("Could not copy to clipboard"),
  );

• Step count in OnboardingProgress includes all steps: s.all returns every step regardless of visibility or skip state. If a step is bypassed via initialStep, the pill count and "Step X of N" text will still reflect the full set. Likely acceptable today, but worth noting if step gating becomes more dynamic.

Nitpick

• Icon sizing: CommandBox uses w-3.5 h-3.5 inline while the rest of the file uses size-* utilities — consider size-3.5 for consistency.

---

pnpm-workspace.yaml

The removal of ext/* from workspaces has no context in the PR description. If any packages under ext/ exist in the repo, this silently breaks their pnpm install integration. Worth confirming ext/ is empty or intentionally de-listed.

---

Summary

Clean, well-motivated UI redesign. The error handling fix and containsSecret security UX are the most substantively valuable changes beyond the visual improvements. The open items above are all minor or nitpick-level — none are blockers.

[jog1t]

i feel like this is supported in motion by a layout prop or height: auto

[abcxff]

Merge activity

• Jun 4, 2:31 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Jun 4, 2:32 PM UTC: @abcxff merged this pull request with Graphite.