fix(auth): autofocus OTP input on verification step

apps/web/test/setup.ts

@@ -11,6 +11,11 @@ if (typeof globalThis.ResizeObserver === "undefined") {
   } as unknown as typeof ResizeObserver;
 }
 
+// jsdom doesn't implement elementFromPoint; input-otp uses it internally.
+if (typeof document.elementFromPoint !== "function") {
+  document.elementFromPoint = () => null;
+}
+
 // jsdom 29 / Node.js 22+ may not provide a proper Web Storage API.
 // Create a proper localStorage mock if methods are missing.
 if (

packages/views/auth/login-page.test.tsx

@@ -198,6 +198,23 @@ describe("LoginPage", () => {
     expect(screen.getByText(/test@example.com/)).toBeInTheDocument();
   });
 
+  it("autofocuses the OTP input when the code step opens", async () => {
+    mockSendCode.mockResolvedValueOnce(undefined);
+    renderWithI18n(<LoginPage onSuccess={onSuccess} />);
+
+    const user = userEvent.setup();
+    await user.type(screen.getByLabelText(/email/i), "test@example.com");
+    await user.click(screen.getByRole("button", { name: /continue/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/check your email/i)).toBeInTheDocument();
+    });
+
+    // The OTP field should be focused on mount so the user can type the code
+    // without clicking it first — important when repeatedly switching accounts.
+    expect(getOTPInput()).toHaveFocus();
+  });
+
   it("shows error when sendCode fails", async () => {
     mockSendCode.mockRejectedValueOnce(new Error("Rate limited"));
     renderWithI18n(<LoginPage onSuccess={onSuccess} />);

packages/views/auth/login-page.tsx

@@ -349,6 +349,7 @@ export function LoginPage({
           </CardHeader>
           <CardContent className="flex flex-col items-center gap-4">
             <InputOTP
+              autoFocus
               maxLength={6}
               value={code}
               onChange={(value) => {