feat(vercel): always show all integration steps

[jog1t]

Closes FRONT-889

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-inspector	Ready	Preview	Comment	Dec 4, 2025 11:38pm

3 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-cloud	Ignored			Dec 4, 2025 11:38pm
rivet-site	Ignored	Preview		Dec 4, 2025 11:38pm
rivetkit-serverless	Skipped			Dec 4, 2025 11:38pm

[linear]

FRONT-889 Fix vercel dialog

[jog1t]

• feat(vercel): always show all integration steps #3590 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

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

[pkg-pr-new]

More templates

• example-ai-agent
• example-ai-and-user-generated-actors-freestyle
• chat-room
• example-cloudflare-workers
• example-cloudflare-workers-hono
• example-cloudflare-workers-inline-client
• example-counter
• example-counter-next-js
• example-counter-serverless
• example-cursors
• example-cursors-raw-websocket
• example-deno
• example-sqlite
• example-elysia
• example-express
• example-hono
• example-hono-bun
• example-hono-react
• example-kitchen-sink
• example-next-js
• quickstart-actions
• quickstart-cross-actor-actions
• quickstart-multi-region
• quickstart-raw-websockets
• quickstart-realtime
• quickstart-scheduling
• quickstart-state
• example-raw-fetch-handler
• example-raw-websocket-handler
• example-raw-websocket-handler-proxy
• example-react
• starter
• example-stream
• example-trpc

@rivetkit/cloudflare-workers

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

@rivetkit/db

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

@rivetkit/framework-base

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

@rivetkit/next-js

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

@rivetkit/react

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

rivetkit

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

@rivetkit/sql-loader

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

@rivetkit/engine-runner

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

@rivetkit/engine-runner-protocol

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

commit: 2d4683d

[claude]

PR Review: feat(vercel): always show all integration steps

Summary

This PR successfully refactors the environment variables display component and modifies the stepper form to support showing all steps simultaneously. The changes eliminate code duplication across multiple integration dialogs and improve the user experience for the Vercel integration flow.

Overall Assessment: ✅ Looks good with minor suggestions

---

🎯 Strengths

1. Excellent code consolidation: The new env-variables.tsx module eliminates ~250 lines of duplicated code across 4+ files
2. Improved DX: Extracting usePublishableToken and useSelectedDatacenter makes the code more maintainable
3. Clean abstraction: The EnvVariables component properly accepts configuration via props (prefix, runnerName, endpoint)
4. Backward compatible: The stepper form changes are opt-in via showAllSteps flag

---

🔍 Issues & Suggestions

1. Missing Loading State in RivetTokenEnv ⚠️

Location: frontend/src/app/env-variables.tsx:90-107

The original implementation included a loading skeleton, but the refactored version relies on useSuspenseQuery. This is actually fine as long as proper Suspense boundaries exist in parent components.

Recommendation: Verify that Suspense boundaries are properly configured in the dialog components that use EnvVariables.

---

2. Conditional Hook Calls Pattern 📝

Location: frontend/src/app/env-variables.tsx:150-172

The usePublishableToken function uses conditional hooks inside match() with biome-ignore comments. This pattern was already present in the original code and appears to rely on APP_TYPE being a build-time constant.

Recommendation: This is acceptable if APP_TYPE is tree-shaken at build time. Consider adding a comment explaining this for future maintainers.

---

3. CRITICAL: Stepper Form Controls May Be Broken 🔴

Location: frontend/src/app/forms/stepper-form.tsx:130-139

In the traditional (non-showAllSteps) path, the StepPanel is called without explicit showControls or showPrevious props. The StepPanel component has showControls default to false (line 155), which means the controls section won't render at all in traditional stepper mode.

This could break the Previous/Next buttons in all non-Vercel integration flows!

Recommendation: Verify this works correctly or add the missing props:

• showControls={true}
• showPrevious={true}

---

4. Form Validation with showAllSteps ⚠️

Location: frontend/src/app/forms/stepper-form.tsx:119-128

When showAllSteps={true}, all step content is visible but validation still uses stepper.current.schema. Users might fill out visible fields without realizing validation happens only on final submission.

Recommendation: Test this flow thoroughly and consider adding UI guidance about when validation occurs.

---

5. Removed strict: false is Good ✅

Location: frontend/src/components/actors/data-provider.tsx:118-121

Removing strict: false from useRouteContext makes route matching more type-safe. This is a positive change.

---

🧪 Testing Recommendations

1. CRITICAL: Test Railway and manual integration flows to verify Previous/Next buttons work
2. Test Vercel quick-connect flow with all steps shown
3. Verify Suspense boundaries handle token loading properly
4. Test with/without runner name (RIVET_RUNNER should hide when default)
5. Test NEXT_PUBLIC prefix rendering in Vercel flow
6. Test form validation behavior in showAllSteps mode

---

🔒 Security Considerations

✅ No new security issues introduced
✅ Token handling remains consistent
✅ Proper use of NEXT_PUBLIC prefix for client-side env vars

---

📊 Code Quality Metrics

Metric	Value	Assessment
Lines Removed	370	✅
Lines Added	293	✅
Net Change	-77 (21% reduction)	✅ Excellent
Code Duplication	Significantly reduced	✅

---

💡 Final Recommendation

Request Changes - Issue #3 appears to be a potential breaking bug that would prevent Previous/Next buttons from showing in traditional stepper mode (Railway, manual integrations). This needs to be verified and fixed.

The refactoring itself is excellent:

• ✅ Eliminates code duplication
• ✅ Creates reusable, well-designed components
• ✅ Improves maintainability
• ✅ Adds requested show all steps feature

Once the stepper controls issue is resolved, this will be ready to merge.

[graphite-app]

Graphite Automations

"Test" took an action on this PR • (12/04/25)

1 assignee was added to this PR based on Kacper Wojciechowski's automation.

[graphite-app]

Merge activity

• Dec 5, 11:23 AM UTC: jog1t added this pull request to the Graphite merge queue.
• Dec 5, 11:24 AM UTC: CI is running for this pull request on a draft pull request (#3594) due to your merge queue CI optimization settings.
• Dec 5, 11:25 AM UTC: Merged by the Graphite merge queue via draft PR: #3594.