fix(webapp): conform v1 fixes after rebasing on main

Resolves conform v1 type errors surfaced once the @conform-to v1 upgrade
was rebased onto main's newer billing-limits / dev-branches code:

- billing config/recovery panels: FormMetadata has no `.ref` in v1; use a
  local form ref for the manual input-event dispatch
- billing alerts: pass the schema generic to useForm so array fields infer
  string[] defaults instead of string
- test task form: drop redundant explicit type="hidden" (getInputProps
  sets it), move the region Select `key` after the spread, add the missing
  getInputProps options arg, and use getFormProps for the delete form
- branches purchase modal: render field.errors (v1) instead of the removed
  .error / .initialError

Author: carderne

apps/webapp/app/components/billing/BillingAlertsSection.tsx

@@ -168,7 +168,7 @@ export function BillingAlertsSection({
     !emailsMatchSaved(emailValues, savedEmails);
   const lastSubmission = isDirty ? alertsSubmission : undefined;
 
-  const [form, { emails, alertLevels }] = useForm({
+  const [form, { emails, alertLevels }] = useForm<z.infer<typeof billingAlertsSchema>>({
     id: "billing-alerts",
     lastResult: lastSubmission as any,
     shouldRevalidate: "onInput",

apps/webapp/app/components/billing/BillingLimitConfigSection.tsx

@@ -118,6 +118,7 @@ export function BillingLimitConfigSection({
   const [customAmount, setCustomAmount] = useState(savedCustomAmount);
   const [cancelInProgressRuns, setCancelInProgressRuns] = useState(savedCancelInProgressRuns);
   const customAmountInputRef = useRef<HTMLInputElement>(null);
+  const formRef = useRef<HTMLFormElement>(null);
 
   useEffect(() => {
     setMode(savedMode);
@@ -167,8 +168,8 @@ export function BillingLimitConfigSection({
   });
 
   useEffect(() => {
-    form.ref.current?.dispatchEvent(new Event("input", { bubbles: true }));
-  }, [customAmount, form.ref, mode]);
+    formRef.current?.dispatchEvent(new Event("input", { bubbles: true }));
+  }, [customAmount, mode]);
 
   const planLimitLabel = formatCurrency(planLimitCents / 100, false);
   const showPlanInfoCallout = mode === "plan";
@@ -185,7 +186,7 @@ export function BillingLimitConfigSection({
         </Paragraph>
       </div>
 
-      <Form method="post" {...getFormProps(form)}>
+      <Form method="post" {...getFormProps(form)} ref={formRef}>
         <input type="hidden" name="intent" value="billing-limit" />
         <Fieldset>
           <input type="hidden" name="mode" value={mode} />

apps/webapp/app/components/billing/BillingLimitRecoveryPanel.tsx

@@ -60,6 +60,7 @@ export function BillingLimitRecoveryPanel({
   const [newAmount, setNewAmount] = useState(String(suggestedNewLimitDollars));
   const [resumeMode, setResumeMode] = useState<"queue" | "new_only">("queue");
   const newAmountInputRef = useRef<HTMLInputElement>(null);
+  const formRef = useRef<HTMLFormElement>(null);
 
   useEffect(() => {
     setNewAmount(String(suggestedNewLimitDollars));
@@ -92,8 +93,8 @@ export function BillingLimitRecoveryPanel({
   });
 
   useEffect(() => {
-    form.ref.current?.dispatchEvent(new Event("input", { bubbles: true }));
-  }, [action, form.ref, newAmount, resumeMode]);
+    formRef.current?.dispatchEvent(new Event("input", { bubbles: true }));
+  }, [action, newAmount, resumeMode]);
 
   const navigation = useNavigation();
   const isSubmitting = navigation.state === "submitting";
@@ -142,7 +143,7 @@ export function BillingLimitRecoveryPanel({
         )}
       </div>
 
-      <Form method="post" {...getFormProps(form)}>
+      <Form method="post" {...getFormProps(form)} ref={formRef}>
         <input type="hidden" name="intent" value="billing-limit-resolve" />
         <input type="hidden" name="action" value={action} />
         <input type="hidden" name="resumeMode" value={resumeMode} />

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx

@@ -712,7 +712,7 @@ function PurchaseBranchesModal({
                   disabled={isLoading}
                 />
                 <FormError id={amount.errorId}>
-                  {amount.error ?? amount.initialError?.[""]?.[0]}
+                  {amount.errors}
                 </FormError>
                 <FormError>{form.errors}</FormError>
               </InputGroup>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx

@@ -636,8 +636,8 @@ function StandardTaskForm({
                         switching environments. The key forces a remount so it reinitializes
                         with the correct defaultValue. */}
                     <Select
-                      key={`region-${environment.id}`}
                       {...getSelectProps(region)}
+                      key={`region-${environment.id}`}
                       variant="tertiary/small"
                       placeholder={isDev ? "–" : undefined}
                       dropdownIcon
@@ -1014,17 +1014,14 @@ function ScheduledTaskForm({
   return (
     <Form className="grid h-full max-h-full grid-rows-[1fr_auto]" method="post" {...getFormProps(form)}>
       <input
-        type="hidden"
         {...getInputProps(triggerSource, { type: "hidden" })}
         value={"SCHEDULED"}
       />
       <input
-        type="hidden"
         {...getInputProps(taskIdentifier, { type: "hidden" })}
         value={task.taskIdentifier}
       />
       <input
-        type="hidden"
         {...getInputProps(environmentId, { type: "hidden" })}
         value={environment.id}
       />
@@ -1042,7 +1039,6 @@ function ScheduledTaskForm({
                   Timestamp UTC
                 </Label>
                 <input
-                  type="hidden"
                   {...getInputProps(timestamp, { type: "hidden" })}
                   value={timestampValue?.toISOString() ?? ""}
                 />
@@ -1066,7 +1062,6 @@ function ScheduledTaskForm({
                   Last timestamp UTC
                 </Label>
                 <input
-                  type="hidden"
                   {...getInputProps(lastTimestamp, { type: "hidden" })}
                   value={lastTimestampValue?.toISOString() ?? ""}
                 />
@@ -1196,8 +1191,8 @@ function ScheduledTaskForm({
                   switching environments. The key forces a remount so it reinitializes
                   with the correct defaultValue. */}
                   <Select
-                    key={`region-${environment.id}`}
                     {...getSelectProps(region)}
+                    key={`region-${environment.id}`}
                     variant="tertiary/small"
                     placeholder={isDev ? "–" : undefined}
                     dropdownIcon
@@ -1692,7 +1687,7 @@ function RunTemplatesPopover({
             >
               Cancel
             </Button>
-            <Form method="post" {...deleteForm.props}>
+            <Form method="post" {...getFormProps(deleteForm)}>
               <input
                 {...getInputProps(templateId, { type: "hidden" })}
                 value={templateIdToDelete || ""}
@@ -1881,7 +1876,7 @@ function CreateTemplateModal({
               <InputGroup className="max-w-full">
                 <Label htmlFor={label.id}>Template label</Label>
                 <Input
-                  {...getInputProps(label)}
+                  {...getInputProps(label, { type: "text" })}
                   placeholder="Enter a name for this template"
                   maxLength={42}
                 />