refactor(frontend): split OnboardingWizard's validation vs real failures

Field-validation messages ("please fill this in") stay local and
inline. Real failures (Garmin login rejected, MFA rejected, complete()
failing) now call showError. The complete()-failure Retry button's
visibility switches from the error text's presence to a new
completeFailed boolean, since the error text itself now lives only in
the (transient) banner.

frontend/src/OnboardingWizard.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { api } from "./api/client";
+import { showError } from "./banner";
 import "./OnboardingWizard.css";
 import type { AuthResponse } from "./types/api";
 
@@ -21,31 +22,35 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
   const [code, setCode] = useState("");
   const [auth, setAuth] = useState<AuthResponse | null>(null);
   const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  // Field-validation messages only ("please fill this in") -- real
+  // API/Garmin failures go through the shared banner system instead (see
+  // completeFailed below for why the Retry button no longer keys off this).
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [completeFailed, setCompleteFailed] = useState(false);
   const completeTriggered = useRef(false);
 
   function submitName(e: React.FormEvent) {
     e.preventDefault();
     if (!displayName.trim()) {
-      setError("Please enter a display name.");
+      setValidationError("Please enter a display name.");
       return;
     }
-    setError(null);
+    setValidationError(null);
     setStep("garmin");
   }
 
   async function submitGarmin(e: React.FormEvent) {
     e.preventDefault();
     if (!email.trim() || !password) {
-      setError("Please enter your Garmin email and password.");
+      setValidationError("Please enter your Garmin email and password.");
       return;
     }
     setBusy(true);
-    setError(null);
+    setValidationError(null);
     try {
       setAuth(await api.setupGarminLogin(email.trim(), password));
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Something went wrong, please try again.");
+      showError(err instanceof Error ? err.message : "Something went wrong, please try again.");
     } finally {
       setBusy(false);
     }
@@ -54,12 +59,11 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
   async function submitMFA() {
     if (!code.trim()) return;
     setBusy(true);
-    setError(null);
     try {
       setAuth(await api.setupGarminMFA(code.trim()));
       setCode("");
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Something went wrong, please try again.");
+      showError(err instanceof Error ? err.message : "Something went wrong, please try again.");
     } finally {
       setBusy(false);
     }
@@ -67,12 +71,13 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
 
   async function complete() {
     setBusy(true);
-    setError(null);
+    setCompleteFailed(false);
     try {
       const result = await api.setupComplete(displayName.trim());
       onCreated(result.display_name);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Something went wrong, please try again.");
+      showError(err instanceof Error ? err.message : "Something went wrong, please try again.");
+      setCompleteFailed(true);
       setBusy(false);
     }
   }
@@ -108,7 +113,7 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
               ✓
             </button>
           </div>
-          {error && <p className="onboarding-wizard-error">{error}</p>}
+          {validationError && <p className="onboarding-wizard-error">{validationError}</p>}
         </form>
       </div>
     );
@@ -122,13 +127,10 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
       {auth?.status === "authenticated" ? (
         <>
           <p className="onboarding-wizard-message">Connected to Garmin — finishing setup…</p>
-          {error && (
+          {completeFailed && (
-            <>
+            <button type="button" disabled={busy} onClick={complete}>
-              <p className="onboarding-wizard-error">{error}</p>
+              {busy ? "Finishing…" : "Retry"}
-              <button type="button" disabled={busy} onClick={complete}>
+            </button>
-                {busy ? "Finishing…" : "Retry"}
-              </button>
-            </>
           )}
         </>
       ) : auth?.status === "mfa_required" ? (
@@ -142,7 +144,6 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
             autoFocus
           />
           {auth.message && <p className="onboarding-wizard-message">{auth.message}</p>}
-          {error && <p className="onboarding-wizard-error">{error}</p>}
           <button type="button" disabled={busy} onClick={submitMFA}>
             Submit code
           </button>
@@ -165,7 +166,7 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
             disabled={busy}
           />
           {auth?.message && <p className="onboarding-wizard-message">{auth.message}</p>}
-          {error && <p className="onboarding-wizard-error">{error}</p>}
+          {validationError && <p className="onboarding-wizard-error">{validationError}</p>}
           <button type="submit" disabled={busy}>
             {busy ? "Connecting…" : "Login"}
           </button>