polish(frontend): tighten the onboarding wizard's UX

- Drop "Logout" everywhere in the flow: nothing is persisted to the
  database until Garmin actually connects, so closing the tab is
  already a clean escape hatch -- no separate control needed.
- Display-name step: replace the "Next" button with a small checkmark
  icon button next to the input (Enter still submits).
- Garmin credentials step: drop "Previous" (changing the display name
  just means quitting and relaunching, since nothing is persisted yet)
  and rename "Next" to "Login".
- MFA step: drop "Previous" for the same reason.
- Once Garmin reports success (MFA or not), finish setup immediately
  instead of waiting on a "Continue to geniusrun" click.

frontend/src/OnboardingWizard.tsx

@@ -1,5 +1,5 @@
-import { useState } from "react";
-import { api, BASE_URL } from "./api/client";
+import { useEffect, useRef, useState } from "react";
+import { api } from "./api/client";
 import "./OnboardingWizard.css";
 import type { AuthResponse } from "./types/api";
 
@@ -9,9 +9,10 @@ type Step = "name" | "garmin";
 // since nothing is persisted to the database until Garmin actually
 // connects (see
 // docs/superpowers/specs/2026-07-26-onboarding-wizard-deferred-commit-design.md).
-// Quitting partway through (closing the tab, logging out) leaves no trace
-// in the database -- there's no half-created account to clean up or
-// re-prompt for later.
+// Quitting partway through (closing the tab) leaves no trace in the
+// database -- there's no half-created account to clean up or re-prompt
+// for later, so there's deliberately no "Log out" escape hatch anywhere in
+// this flow: closing the tab *is* the escape hatch.
 export function OnboardingWizard({ onCreated }: { onCreated: (displayName: string) => void }) {
   const [step, setStep] = useState<Step>("name");
   const [displayName, setDisplayName] = useState("");
@@ -21,6 +22,7 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
   const [auth, setAuth] = useState<AuthResponse | null>(null);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const completeTriggered = useRef(false);
 
   function submitName(e: React.FormEvent) {
     e.preventDefault();
@@ -75,26 +77,38 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
     }
   }
 
+  // Once Garmin reports success (whether MFA was needed or not), finish
+  // setup immediately -- no "Continue to geniusrun" click required. Guarded
+  // by a ref (not just the effect's dependency array) so this can never
+  // fire twice, e.g. under React StrictMode's double-invoked effects in
+  // development.
+  useEffect(() => {
+    if (auth?.status === "authenticated" && !completeTriggered.current) {
+      completeTriggered.current = true;
+      complete();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [auth?.status]);
+
   if (step === "name") {
     return (
       <div className="onboarding-wizard">
         <h1>🧞‍♀️ Welcome to geniusrun</h1>
         <p>Let's set up your profile. You'll connect your Garmin account next.</p>
         <form onSubmit={submitName}>
-          <input
-            type="text"
-            placeholder="Display name"
-            value={displayName}
-            onChange={(e) => setDisplayName(e.target.value)}
-            autoFocus
-          />
+          <div className="onboarding-wizard-name-row">
+            <input
+              type="text"
+              placeholder="Display name"
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+              autoFocus
+            />
+            <button type="submit" className="onboarding-wizard-icon-button" title="Continue" aria-label="Continue">
+              ✓
+            </button>
+          </div>
           {error && <p className="onboarding-wizard-error">{error}</p>}
-          <button type="submit">Next</button>
-        </form>
-        <form method="post" action={`${BASE_URL}/api/session/logout`}>
-          <button type="submit" className="logout-link">
-            Log out
-          </button>
         </form>
       </div>
     );
@@ -107,10 +121,15 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
 
       {auth?.status === "authenticated" ? (
         <>
-          <p className="onboarding-wizard-message">Connected to Garmin.</p>
-          <button type="button" disabled={busy} onClick={complete}>
-            {busy ? "Finishing…" : "Continue to geniusrun"}
-          </button>
+          <p className="onboarding-wizard-message">Connected to Garmin — finishing setup…</p>
+          {error && (
+            <>
+              <p className="onboarding-wizard-error">{error}</p>
+              <button type="button" disabled={busy} onClick={complete}>
+                {busy ? "Finishing…" : "Retry"}
+              </button>
+            </>
+          )}
         </>
       ) : auth?.status === "mfa_required" ? (
         <div className="onboarding-wizard-mfa">
@@ -124,21 +143,9 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
           />
           {auth.message && <p className="onboarding-wizard-message">{auth.message}</p>}
           {error && <p className="onboarding-wizard-error">{error}</p>}
-          <div className="onboarding-wizard-actions">
-            <button
-              type="button"
-              disabled={busy}
-              onClick={() => {
-                setAuth(null);
-                setError(null);
-              }}
-            >
-              Previous
-            </button>
-            <button type="button" disabled={busy} onClick={submitMFA}>
-              Submit code
-            </button>
-          </div>
+          <button type="button" disabled={busy} onClick={submitMFA}>
+            Submit code
+          </button>
         </div>
       ) : (
         <form onSubmit={submitGarmin}>
@@ -159,29 +166,11 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
           />
           {auth?.message && <p className="onboarding-wizard-message">{auth.message}</p>}
           {error && <p className="onboarding-wizard-error">{error}</p>}
-          <div className="onboarding-wizard-actions">
-            <button
-              type="button"
-              disabled={busy}
-              onClick={() => {
-                setStep("name");
-                setError(null);
-              }}
-            >
-              Previous
-            </button>
-            <button type="submit" disabled={busy}>
-              {busy ? "Connecting…" : "Next"}
-            </button>
-          </div>
+          <button type="submit" disabled={busy}>
+            {busy ? "Connecting…" : "Login"}
+          </button>
         </form>
       )}
-
-      <form method="post" action={`${BASE_URL}/api/session/logout`}>
-        <button type="submit" className="logout-link">
-          Log out
-        </button>
-      </form>
     </div>
   );
 }