refactor(frontend): datacenter aware provider configuration

[jog1t]

Description

Please include a summary of the changes and the related issue. Please also include relevant motivation and context.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

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]

• fix(frontend): entry deduplication #5061
• [slop]feat(frontend): enable compute, add historical logs #5059
• chore: regenerate sdk #5036
• feat(frontend): allow creating serverfull instances during onboarding #5035
• feat(frontend): add provider icons #5034
• refactor(forntend): improve providers table #5033
• fix(frontend): missing provider configuration right after adding it #5032
• refactor(frontend): datacenter aware provider configuration #5031 👈 (View in Graphite)
• feat(frontend): allow local->staging tunnel in dev #5030
• refactor(frontend): better gateway errors #5029
• feat(frontend): rbac token notice for the engine #5028
• fix(frontend): build ladle correctly #5027
• feat(frontend): improve runners errors ui #5026
• fix(frontend): 404 navigation issues #5025
• fix(frontend): ns aware navigation #5024
• fix(frontend): navigate only by using actor ids #5023
• feat(frontend): add serverless check when editing the runner config #4961 : 1 other dependent PR (#4964 )
• main

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

[claude]

PR #5031 Review: refactor(frontend): datacenter aware provider configuration

Overview

This PR does three things:

1. Extracts a reusable ConfirmableSubmitButton component from inline code in edit-runner-config.tsx
2. Adds datacenter-aware confirmation to the serverfull connect flow (shows a warning when adding to an existing runner config)
3. Renames env variables RIVET_RUNNER → RUNNER_POOL and RIVET_RUNNER_NAME → RIVET_POOL

---

Bugs / Correctness Issues

Missing confirmNode reset in StepPanel when form values change (stepper-form.tsx)

ConfirmableSubmitButton correctly resets pending via useEffect(() => { setPending(null); }, [allValues]) when form values change. The StepPanel confirmation (confirmNode) has no equivalent reset. If a user sees the confirmation, edits a form field, and then clicks "Confirm", the message was computed on the old values but submission uses the new (potentially different) values.

Suggested fix — add inside StepPanel:

useEffect(() => { setConfirmNode(null); }, [liveValues]);

liveValues is already computed via useWatch in the same component.

Potentially breaking default datacenter fallback change (connect-manual-serverfull-frame.tsx, ~line 120)

The fallback changed from "auto" to data[0]?.name || "". If data is empty, the fallback is now "". The Zod schema (datacenter: z.string().min(1, ...)) blocks submission on empty string, which is fine — but worth confirming "auto" was not a meaningful backend value that controlled routing.

---

Code Quality

Good: extraction of ConfirmableSubmitButton
Well-structured with the correct async signature on getConfirmation. The hidden-submit-button pattern is consistent with prior art in the codebase.

Good: useRef + useMemo pattern in useStepperConfig
Keeping dataProvider in a ref ensures confirmStep2 always reads the latest provider while defineStepper is only called once. Correct approach.

Good: StepConfirm<TValues> type export and method-style confirm on Step
The contravariance comment is accurate — method declarations allow narrower parameter types at the call site.

Minor: redundant cast in StepPanel
const stepConfirm = (step as Step).confirm — step is already typed as Step & ..., so the cast is a no-op.

Minor: missing w-full in ConfirmableSubmitButton
The original inline version in edit-runner-config.tsx had items-stretch w-full; the new shared component drops w-full. Verify the Save button still fills the expected width in the edit dialog.

---

Env Variable Rename Completeness

Three files update RIVET_RUNNER → RUNNER_POOL / RIVET_RUNNER_NAME → RIVET_POOL:

• env-variables.tsx
• getting-started.tsx
• use-railway-template-link.ts

Worth confirming there are no remaining references in docs strings, other template generators, or test fixtures.

---

Minor Nits

• pb-4 pb-8 duplicate padding classes in tokens.tsx and the new skeleton fallback in settings.tsx — not introduced here, but worth a follow-up cleanup.
• Removed commented-out Step 3 block — good cleanup.
• aria-hidden on the hidden submit button is idiomatic as aria-hidden={true} rather than the bare attribute.

---

Summary

Clean refactoring direction and the datacenter-aware confirmation UX is a nice improvement. The one correctness concern worth addressing is the missing confirmNode reset in StepPanel — without it, the confirmation message can go stale if the user edits form fields after the confirmation dialog appears. Everything else is minor.

[jog1t]

Merge activity

• May 15, 7:36 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• May 15, 7:54 PM UTC: Graphite rebased this pull request as part of a merge.
• May 15, 7:54 PM UTC: @jog1t merged this pull request with Graphite.