feat(frontend): add required dc selector to onboaring

[jog1t]

Description

This pull request improves the getting started flow and form components with several enhancements:

• Added a safe parameter to runnerConfigQueryOptions to allow graceful handling of missing configurations without throwing errors
• Enhanced the stepper form component with support for custom previous button text and improved control layout
• Improved the serverless connection form with better field descriptions, proper form validation structure, and enhanced datacenter selection messaging
• Updated the getting started flow to pre-populate forms with existing runner configurations when available
• Fixed combobox behavior to only close on single selection, keeping it open for multiple selections
• Reorganized the backend setup step to show configuration options before the endpoint field
• Enhanced the frontend setup waiting state with better layout and additional manual creation option

Type of change

• New feature (non-breaking change which adds functionality)
• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Please describe the tests that you ran to verify your changes.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[jog1t]

• feat(frontend): add required dc selector to onboaring #4474 👈 (View in Graphite)
• main

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

[railway-app]

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

Service	Status	Web	Updated (UTC)
kitchen-sink	❌ Build Failed (View Logs)	Web	Mar 22, 2026 at 12:51 am
ladle	🕒 Building (View Logs)	Web	Mar 22, 2026 at 12:51 am
frontend-cloud	🕒 Building (View Logs)	Web	Mar 22, 2026 at 12:51 am
frontend-inspector	🕒 Building (View Logs)	Web	Mar 22, 2026 at 12:51 am
website	✅ Success (View Logs)	Web	Mar 22, 2026 at 12:48 am
mcp-hub	✅ Success (View Logs)	Web	Mar 22, 2026 at 12:45 am

[claude]

PR Review: feat(frontend): add required dc selector to onboarding

Overall this PR improves UX nicely. Pre-populating forms with existing config, better datacenter messaging, and fixing the combobox multi-select behavior are all good additions.

Bugs

1. datacenters default value is wrong type (getting-started.tsx)

The defaultValues object sets datacenters: [] (an array) as the fallback, but the field expects a plain object. The RegionSelect component reads this via Object.keys(field.value || {}) and the onChange handler produces an object via Object.fromEntries(...). Using [] as the fallback will produce incorrect behavior when no existing config is found. Should be datacenters: {}.

2. Missing runnerName in base defaults (getting-started.tsx)

The original defaultValues always included runnerName: default. In the new code it only appears when initialRunnerConfig is non-null (spread from it). When the user has no existing config, runnerName will be undefined in the form, which may break form submission. The base defaults should include runnerName: default before the spread.

Code Quality

3. Datacenters component missing FormItem wrapper (connect-manual-serverless-form.tsx)

The refactored Datacenters component's FormField render prop returns a bare fragment without a FormItem wrapper. All other form fields in this file use FormItem for consistent spacing and layout. This will likely cause alignment issues with the rest of the form.

4. Removed debug console.log

Good catch on removing console.log(formState.errors, formState.isValid, watch()) from StepContent. It should not have been committed.

Minor

• Commit message typo: onboaring should be onboarding
• The previous button rendering in stepper-form.tsx checks step.previous three separate times (for size, startIcon, and children). This could be simplified to reduce duplication.

Positive Notes

• The safe param on runnerConfigQueryOptions is a clean API. Returning null instead of throwing is the right pattern for optional pre-population.
• Fixing the combobox to only close on single-select is a correct bug fix.
• The || to ?? change for MinRunners input value properly preserves 0 as a valid value.
• Moving defaultValues out of JSX is good for readability and avoids unnecessary re-creation on each render.

[pkg-pr-new]

More templates

• actor-actions
• actor-actions-vercel
• ai-agent
• ai-agent-vercel
• example-ai-and-user-generated-actors-freestyle
• chat-room
• chat-room-vercel
• example-cloudflare-workers
• example-cloudflare-workers-hono
• collaborative-document
• collaborative-document-vercel
• cross-actor-actions
• cross-actor-actions-vercel
• example-cursors
• example-cursors-raw-websocket
• example-cursors-raw-websocket-vercel
• example-cursors-vercel
• custom-serverless
• example-elysia
• example-experimental-durable-streams-ai-agent
• example-experimental-durable-streams-ai-agent-vercel
• geo-distributed-database
• geo-distributed-database-vercel
• hello-world
• hello-world-vercel
• example-hono
• hono-react
• hono-react-vercel
• example-kitchen-sink
• example-kitchen-sink-vercel
• multi-region-vercel
• multiplayer-game
• example-multiplayer-game-patterns
• example-multiplayer-game-patterns-vercel
• multiplayer-game-vercel
• native-websockets
• native-websockets-vercel
• next-js
• per-tenant-database
• per-tenant-database-vercel
• example-raw-fetch-handler
• example-raw-fetch-handler-vercel
• example-raw-websocket-handler
• example-raw-websocket-handler-proxy
• example-raw-websocket-handler-proxy-vercel
• example-raw-websocket-handler-vercel
• example-react
• example-react-vercel
• sandbox
• sandbox-coding-agent
• sandbox-coding-agent-vercel
• sandbox-vercel
• scheduling
• scheduling-vercel
• example-sqlite-drizzle
• example-sqlite-raw
• state
• state-vercel
• example-stream
• example-stream-vercel
• example-trpc

@rivetkit/virtual-websocket

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/virtual-websocket@4474

@rivetkit/cloudflare-workers

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@4474

@rivetkit/framework-base

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/framework-base@4474

@rivetkit/next-js

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/next-js@4474

@rivetkit/react

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/react@4474

rivetkit

pnpm add https://pkg.pr.new/rivet-dev/rivet/rivetkit@4474

@rivetkit/sql-loader

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sql-loader@4474

@rivetkit/sqlite-vfs

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sqlite-vfs@4474

@rivetkit/traces

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/traces@4474

@rivetkit/workflow-engine

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/workflow-engine@4474

@rivetkit/engine-runner

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner@4474

@rivetkit/engine-runner-protocol

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner-protocol@4474

commit: 28be5f8

[jog1t]

Merge activity

• Mar 22, 12:51 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• Mar 22, 12:51 AM UTC: @jog1t merged this pull request with Graphite.