frontend phase 1: auth — phone-OTP login, role routing & session refresh

Replace the username/password stub with Balinyaar's real credential (phone-OTP)
and add the role router every authenticated screen sits behind.

- services/auth rewritten for OTP over the b2 contract: types/keys/constants,
  clientApi+mockApi behind a config'd seam, hooks (useRequestOtp/useVerifyOtp/
  useMe/useRefresh/useLogout/useSelectRole/useSessionRoleSync). Stub removed.
- A1/A2 customer login + B1/B2 nurse switch as one OTP flow at /login
  (PhoneStep/OtpStep: auto-verify, resend countdown, wrong/expired/lockout states).
- Role router: pure resolveRoleDestination + RoleRouter -> family / nurse /
  admin / select-role, with a splash while /me loads (no wrong-shell flash).
- SelectRole first-use screen at /select-role.
- Widened AuthState (roles via SessionUser), hydrated from /me by useSessionRoleSync.
- Fetch-layer silent token refresh (single-flight + one retry) + shared
  persistAuthTokens/clearAuthTokens; useRefresh as the on-demand path.
- auth i18n namespace in both locales; tests for routing branches, countdown,
  OtpStep state machine, RoleRouter branches; fixed jest @/ -> src alias.
- Docs: client/CLAUDE.md, frontend STATUS/report, for-backend REQ-002..004.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

client/src/app/[locale]/(private-routes)/layout.tsx

@@ -1,8 +1,11 @@
 'use client';
 import type { ReactNode } from 'react';
 import { PrivateLayout } from '@/layout';
-
+import { useSessionRoleSync } from '@/services/auth';
 
 export default function PrivateRouteLayout({ children }: { children: ReactNode }) {
+  // Hydrate AuthContext roles from /me for a returning (server-seeded) session so the shells
+  // pick the right chrome without a second role store.
+  useSessionRoleSync();
   return <PrivateLayout>{children}</PrivateLayout>;
 }

client/src/app/[locale]/(private-routes)/select-role/page.tsx

@@ -0,0 +1,20 @@
+'use client';
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { APP_ROLES } from '@/constants';
+import { SelectRole } from '@/components/auth';
+
+function SelectRoleContent() {
+  const searchParams = useSearchParams();
+  const initialRole = searchParams.get('role') === APP_ROLES.NURSE ? APP_ROLES.NURSE : APP_ROLES.CUSTOMER;
+  return <SelectRole initialRole={initialRole} />;
+}
+
+/** First-use role picker for an authenticated user with no public role yet. */
+export default function SelectRolePage() {
+  return (
+    <Suspense>
+      <SelectRoleContent />
+    </Suspense>
+  );
+}

client/src/app/[locale]/(public-routes)/login/page.tsx

@@ -0,0 +1,15 @@
+'use client';
+import { Suspense } from 'react';
+import { LoginFlow } from '@/components/auth';
+
+/**
+ * Phone-OTP login (A1/A2 customer, B1/B2 nurse). The Suspense boundary is required because
+ * LoginFlow reads `useSearchParams` (the `?role=nurse` switch).
+ */
+export default function LoginPage() {
+  return (
+    <Suspense>
+      <LoginFlow />
+    </Suspense>
+  );
+}