fix(auth): localize the ADR-0069 remediation gate and the auth split-panel (#2870) (#2875)

`RemediationOverlay` had no i18n at all. It is the full-screen gate mounted
unconditionally at `ConsoleShell` (`fixed inset-0 z-[200]`, shown on
`PASSWORD_EXPIRED` / `MFA_REQUIRED`) with no route around it, so a user who
could not read English could not get back into the product.

- New `auth.remediation.*` in all ten locale packs, covering the
  expired-password and MFA-enrolment branches plus the shared sign-out exit.
- Failure messages are translated where they are raised, since they are held
  in component state; the server-authored message is left untouched and only
  its empty fallback is localized.
- `auth.layout.*` for the auth split-panel, whose forms were already localized
  so the panel rendered half in the user's language and half in English. Both
  copies of `AuthPageLayout` are fixed — the one the auth pages import and the
  byte-identical one re-exported from the package root.

Adds a locale-parity test over both namespaces (identical key set across all
ten packs, non-empty leaves, prose differing from English), mutation-verified
in both directions.

Closes #2870.

Author: os-zhuang

.changeset/remediation-overlay-i18n.md

@@ -0,0 +1,32 @@
+---
+"@object-ui/i18n": patch
+"@object-ui/app-shell": patch
+---
+
+fix(auth): localize the ADR-0069 remediation gate and the auth split-panel (#2870)
+
+`RemediationOverlay` had no i18n at all. It is the full-screen gate mounted
+unconditionally at `ConsoleShell` (`fixed inset-0 z-[200]`) that a user hits
+when the backend returns `PASSWORD_EXPIRED` or `MFA_REQUIRED` — there is no
+route around it, so a user who could not read English could not get back into
+the product. That makes it a usability block rather than a cosmetic gap.
+
+- New `auth.remediation.*` namespace in all ten locale packs, covering both
+  branches of the gate: expired-password (title, three field labels, submit /
+  submitting, mismatch and failure messages) and MFA enrolment (password step,
+  QR scan copy, backup-code disclosure, code entry, verify / verifying, and the
+  enrolment and invalid-code failures), plus the shared "sign out instead" exit.
+- Validation and failure messages are translated where they are raised, since
+  they are held in component state and rendered later.
+- The server-provided `remediationRequired.message` is left untouched; only the
+  empty-message fallback is localized.
+- `AuthPageLayout`'s two marketing strings move to `auth.layout.*`. The forms it
+  wraps were already localized, so the split-panel had been rendering half in
+  the user's language and half in English.
+
+Adds a locale-parity test over both namespaces, asserting an identical key set
+across all ten packs, a non-empty string at every leaf, and that prose differs
+from English (short labels like "Continue" legitimately collide). i18next falls
+back to `en` silently and its missing-key handler is dev-only, so a key added to
+one pack and forgotten elsewhere is invisible in whichever locales get tested by
+hand.

packages/app-shell/src/console/RemediationOverlay.tsx

@@ -9,6 +9,7 @@
 import { useState } from 'react';
 import { useAuth } from '@object-ui/auth';
 import { Button, Input, Label } from '@object-ui/components';
+import { useObjectTranslation } from '@object-ui/i18n';
 import { toCanvas } from 'qrcode';
 
 /**
@@ -38,19 +39,21 @@ export function RemediationOverlay() {
 
 function SignOutLink() {
   const { signOut } = useAuth();
+  const { t } = useObjectTranslation();
   return (
     <button
       type="button"
       onClick={() => { void signOut(); }}
       className="mt-4 w-full text-center text-xs text-muted-foreground hover:text-foreground hover:underline"
     >
-      Sign out instead
+      {t('auth.remediation.signOut')}
     </button>
   );
 }
 
 function ExpiredPasswordForm({ message }: { message: string }) {
   const { changePassword, setRemediationRequired } = useAuth();
+  const { t } = useObjectTranslation();
   const [current, setCurrent] = useState('');
   const [next, setNext] = useState('');
   const [confirm, setConfirm] = useState('');
@@ -60,44 +63,46 @@ function ExpiredPasswordForm({ message }: { message: string }) {
   const submit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError(null);
-    if (next !== confirm) { setError('New passwords do not match.'); return; }
+    if (next !== confirm) { setError(t('auth.remediation.password.mismatch')); return; }
     setBusy(true);
     try {
       await changePassword(current, next);
       setRemediationRequired(null);
       window.location.reload();
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Could not change password.');
+      setError(err instanceof Error ? err.message : t('auth.remediation.password.failed'));
       setBusy(false);
     }
   };
 
   return (
     <form onSubmit={submit} className="space-y-4">
       <div>
-        <h2 className="text-lg font-semibold">Your password has expired</h2>
+        <h2 className="text-lg font-semibold">{t('auth.remediation.password.title')}</h2>
+        {/* `message` is server-authored (localized upstream or not at all); only
+            the empty-message fallback is ours to translate. */}
         <p className="mt-1 text-sm text-muted-foreground">
-          {message || 'Please set a new password to continue.'}
+          {message || t('auth.remediation.password.fallbackMessage')}
         </p>
       </div>
       <div className="space-y-2">
-        <Label htmlFor="rem-cur">Current password</Label>
+        <Label htmlFor="rem-cur">{t('auth.remediation.password.current')}</Label>
         <Input id="rem-cur" type="password" autoComplete="current-password" value={current}
           onChange={(e) => setCurrent(e.target.value)} required />
       </div>
       <div className="space-y-2">
-        <Label htmlFor="rem-new">New password</Label>
+        <Label htmlFor="rem-new">{t('auth.remediation.password.next')}</Label>
         <Input id="rem-new" type="password" autoComplete="new-password" value={next}
           onChange={(e) => setNext(e.target.value)} required />
       </div>
       <div className="space-y-2">
-        <Label htmlFor="rem-conf">Confirm new password</Label>
+        <Label htmlFor="rem-conf">{t('auth.remediation.password.confirm')}</Label>
         <Input id="rem-conf" type="password" autoComplete="new-password" value={confirm}
           onChange={(e) => setConfirm(e.target.value)} required />
       </div>
       {error ? <p className="text-sm text-destructive">{error}</p> : null}
       <Button type="submit" className="w-full" disabled={busy}>
-        {busy ? 'Updating…' : 'Change password & continue'}
+        {busy ? t('auth.remediation.password.submitting') : t('auth.remediation.password.submit')}
       </Button>
       <SignOutLink />
     </form>
@@ -119,6 +124,7 @@ function TotpQr({ uri }: { uri: string }) {
 
 function MfaEnrollForm({ message }: { message: string }) {
   const { enrollTotp, verifyTotp, setRemediationRequired } = useAuth();
+  const { t } = useObjectTranslation();
   const [step, setStep] = useState<'password' | 'verify'>('password');
   const [password, setPassword] = useState('');
   const [code, setCode] = useState('');
@@ -136,7 +142,7 @@ function MfaEnrollForm({ message }: { message: string }) {
       setBackupCodes(codes ?? []);
       setStep('verify');
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Could not start enrollment.');
+      setError(err instanceof Error ? err.message : t('auth.remediation.mfa.enrollFailed'));
     } finally {
       setBusy(false);
     }
@@ -150,7 +156,7 @@ function MfaEnrollForm({ message }: { message: string }) {
       setRemediationRequired(null);
       window.location.reload();
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Invalid code. Try again.');
+      setError(err instanceof Error ? err.message : t('auth.remediation.mfa.invalidCode'));
       setBusy(false);
     }
   };
@@ -159,19 +165,19 @@ function MfaEnrollForm({ message }: { message: string }) {
     return (
       <form onSubmit={start} className="space-y-4">
         <div>
-          <h2 className="text-lg font-semibold">Set up two-factor authentication</h2>
+          <h2 className="text-lg font-semibold">{t('auth.remediation.mfa.title')}</h2>
           <p className="mt-1 text-sm text-muted-foreground">
-            {message || 'Your organization requires an authenticator app to continue.'}
+            {message || t('auth.remediation.mfa.fallbackMessage')}
           </p>
         </div>
         <div className="space-y-2">
-          <Label htmlFor="rem-pw">Confirm your password</Label>
+          <Label htmlFor="rem-pw">{t('auth.remediation.mfa.confirmPassword')}</Label>
           <Input id="rem-pw" type="password" autoComplete="current-password" value={password}
             onChange={(e) => setPassword(e.target.value)} required />
         </div>
         {error ? <p className="text-sm text-destructive">{error}</p> : null}
         <Button type="submit" className="w-full" disabled={busy}>
-          {busy ? 'Preparing…' : 'Continue'}
+          {busy ? t('auth.remediation.mfa.preparing') : t('auth.remediation.mfa.continue')}
         </Button>
         <SignOutLink />
       </form>
@@ -181,29 +187,29 @@ function MfaEnrollForm({ message }: { message: string }) {
   return (
     <form onSubmit={verify} className="space-y-4">
       <div>
-        <h2 className="text-lg font-semibold">Scan with your authenticator</h2>
+        <h2 className="text-lg font-semibold">{t('auth.remediation.mfa.scanTitle')}</h2>
         <p className="mt-1 text-sm text-muted-foreground">
-          Scan this QR code with Google Authenticator, 1Password, Authy, etc., then enter the 6-digit code.
+          {t('auth.remediation.mfa.scanBody')}
         </p>
       </div>
       {totpUri ? <TotpQr uri={totpUri} /> : null}
       {backupCodes.length > 0 ? (
         <details className="rounded-md border bg-muted/40 p-3 text-xs">
-          <summary className="cursor-pointer font-medium">Save your backup codes</summary>
-          <p className="mt-1 text-muted-foreground">Store these somewhere safe — each can be used once if you lose your device.</p>
+          <summary className="cursor-pointer font-medium">{t('auth.remediation.mfa.backupTitle')}</summary>
+          <p className="mt-1 text-muted-foreground">{t('auth.remediation.mfa.backupBody')}</p>
           <div className="mt-2 grid grid-cols-2 gap-1 font-mono">
             {backupCodes.map((c) => <span key={c}>{c}</span>)}
           </div>
         </details>
       ) : null}
       <div className="space-y-2">
-        <Label htmlFor="rem-code">6-digit code</Label>
+        <Label htmlFor="rem-code">{t('auth.remediation.mfa.codeLabel')}</Label>
         <Input id="rem-code" inputMode="numeric" autoComplete="one-time-code" maxLength={8}
           placeholder="123456" value={code} onChange={(e) => setCode(e.target.value)} required />
       </div>
       {error ? <p className="text-sm text-destructive">{error}</p> : null}
       <Button type="submit" className="w-full" disabled={busy}>
-        {busy ? 'Verifying…' : 'Verify & continue'}
+        {busy ? t('auth.remediation.mfa.verifying') : t('auth.remediation.mfa.verify')}
       </Button>
       <SignOutLink />
     </form>

packages/app-shell/src/console/auth/AuthPageLayout.tsx

@@ -5,9 +5,11 @@
  */
 
 import type React from 'react';
+import { useObjectTranslation } from '@object-ui/i18n';
 import { getProductName, getLogoUrl } from '../../runtime-config';
 
 export function AuthPageLayout({ children }: { children: React.ReactNode }) {
+  const { t } = useObjectTranslation();
   const productName = getProductName();
   const logoUrl = getLogoUrl();
   return (
@@ -38,10 +40,10 @@ export function AuthPageLayout({ children }: { children: React.ReactNode }) {
             <span className="text-2xl font-bold">{productName}</span>
           </div>
           <h2 className="text-3xl font-bold leading-tight">
-            Build powerful business applications, faster.
+            {t('auth.layout.headline')}
           </h2>
           <p className="text-lg opacity-90">
-            The universal platform for enterprise data management, workflows, and analytics.
+            {t('auth.layout.subhead')}
           </p>
         </div>
       </div>

packages/app-shell/src/layout/AuthPageLayout.tsx

@@ -5,9 +5,11 @@
  */
 
 import type React from 'react';
+import { useObjectTranslation } from '@object-ui/i18n';
 import { getProductName, getLogoUrl } from '../runtime-config';
 
 export function AuthPageLayout({ children }: { children: React.ReactNode }) {
+  const { t } = useObjectTranslation();
   const productName = getProductName();
   const logoUrl = getLogoUrl();
   return (
@@ -38,10 +40,10 @@ export function AuthPageLayout({ children }: { children: React.ReactNode }) {
             <span className="text-2xl font-bold">{productName}</span>
           </div>
           <h2 className="text-3xl font-bold leading-tight">
-            Build powerful business applications, faster.
+            {t('auth.layout.headline')}
           </h2>
           <p className="text-lg opacity-90">
-            The universal platform for enterprise data management, workflows, and analytics.
+            {t('auth.layout.subhead')}
           </p>
         </div>
       </div>

packages/i18n/src/__tests__/authRemediation-locale-parity.test.ts

@@ -0,0 +1,86 @@
+/**
+ * auth.remediation / auth.layout locale parity (#2870).
+ *
+ * `RemediationOverlay` is the ADR-0069 full-screen gate: when the backend
+ * returns `PASSWORD_EXPIRED` or `MFA_REQUIRED`, it covers the app
+ * (`fixed inset-0 z-[200]`) and there is no route around it. A user who cannot
+ * read it cannot get back into the product — so a missing key here is not
+ * cosmetic the way a missing page title is.
+ *
+ * i18next falls back to `en` silently (`fallbackLng: 'en'`, and the
+ * missing-key handler is dev-only), so a key added to one pack and forgotten
+ * in the others looks fine in whichever two locales get tested by hand. This
+ * pins the whole namespace across all ten packs.
+ */
+import { describe, it, expect } from 'vitest';
+import { builtInLocales } from '../locales';
+
+/** Flatten a nested translation node into sorted dot-paths. */
+function keyPaths(node: unknown, prefix = ''): string[] {
+  if (node === null || typeof node !== 'object') return [prefix];
+  return Object.entries(node as Record<string, unknown>)
+    .flatMap(([k, v]) => keyPaths(v, prefix ? `${prefix}.${k}` : k))
+    .sort();
+}
+
+/** Read a dot-path out of a nested translation node. */
+function readPath(node: unknown, path: string): unknown {
+  return path.split('.').reduce<unknown>(
+    (acc, seg) => (acc && typeof acc === 'object' ? (acc as Record<string, unknown>)[seg] : undefined),
+    node,
+  );
+}
+
+type LocaleCode = keyof typeof builtInLocales;
+
+const LOCALES = Object.keys(builtInLocales) as LocaleCode[];
+const NAMESPACES = ['auth.remediation', 'auth.layout'] as const;
+
+const nodeOf = (code: LocaleCode, ns: string): unknown =>
+  readPath(builtInLocales[code], ns);
+
+describe.each(NAMESPACES)('%s translations', (ns) => {
+  it('is present in every built-in locale pack', () => {
+    const missing = LOCALES.filter((code) => !nodeOf(code, ns));
+    expect(missing).toEqual([]);
+  });
+
+  it('exposes an identical key set in every locale', () => {
+    const expected = keyPaths(nodeOf('en', ns));
+    // Guard against the flattener silently returning nothing.
+    expect(expected.length).toBeGreaterThan(1);
+
+    for (const code of LOCALES) {
+      expect({ code, keys: keyPaths(nodeOf(code, ns)) }).toEqual({ code, keys: expected });
+    }
+  });
+
+  it('has a non-empty string at every leaf', () => {
+    for (const code of LOCALES) {
+      const node = nodeOf(code, ns);
+      for (const path of keyPaths(node)) {
+        const value = readPath(node, path);
+        expect({ code, path, ok: typeof value === 'string' && value.trim().length > 0 })
+          .toEqual({ code, path, ok: true });
+      }
+    }
+  });
+
+  it('actually translates the prose, rather than copying English', () => {
+    // Short labels legitimately collide across languages ("Continue" is
+    // "Continue" in French); only prose is checked, where a verbatim match
+    // means the pack was never translated.
+    const prose = keyPaths(nodeOf('en', ns)).filter((p) => {
+      const v = readPath(nodeOf('en', ns), p);
+      return typeof v === 'string' && v.length > 40;
+    });
+    expect(prose.length).toBeGreaterThan(0);
+
+    for (const code of LOCALES.filter((c) => c !== 'en')) {
+      for (const path of prose) {
+        expect({ code, path, sameAsEnglish: readPath(nodeOf(code, ns), path) === readPath(nodeOf('en', ns), path) })
+          .toEqual({ code, path, sameAsEnglish: false });
+      }
+    }
+  });
+});

packages/i18n/src/locales/ar.ts

@@ -1275,6 +1275,40 @@ const ar = {
     shell: {
       tenantHostHint: "تسجل الدخول إلى مساحة العمل هذه",
     },
+    layout: {
+      headline: "أنشئ تطبيقات أعمال قوية بسرعة أكبر.",
+      subhead: "المنصة الموحدة لإدارة بيانات المؤسسات وسير العمل والتحليلات.",
+    },
+    remediation: {
+      signOut: "تسجيل الخروج بدلاً من ذلك",
+      password: {
+        title: "انتهت صلاحية كلمة المرور",
+        fallbackMessage: "يرجى تعيين كلمة مرور جديدة للمتابعة.",
+        current: "كلمة المرور الحالية",
+        next: "كلمة المرور الجديدة",
+        confirm: "تأكيد كلمة المرور الجديدة",
+        submit: "تغيير كلمة المرور والمتابعة",
+        submitting: "جارٍ التحديث…",
+        mismatch: "كلمتا المرور الجديدتان غير متطابقتين.",
+        failed: "تعذّر تغيير كلمة المرور.",
+      },
+      mfa: {
+        title: "إعداد المصادقة الثنائية",
+        fallbackMessage: "تتطلب مؤسستك تطبيق مصادقة للمتابعة.",
+        confirmPassword: "أكّد كلمة المرور",
+        continue: "متابعة",
+        preparing: "جارٍ التحضير…",
+        enrollFailed: "تعذّر بدء التسجيل.",
+        scanTitle: "امسح الرمز بتطبيق المصادقة",
+        scanBody: "امسح رمز QR هذا باستخدام Google Authenticator أو 1Password أو Authy وغيرها، ثم أدخل الرمز المكوّن من 6 أرقام.",
+        backupTitle: "احفظ رموز النسخ الاحتياطي",
+        backupBody: "احتفظ بها في مكان آمن — يمكن استخدام كل رمز مرة واحدة إذا فقدت جهازك.",
+        codeLabel: "رمز مكوّن من 6 أرقام",
+        verify: "تحقّق وتابع",
+        verifying: "جارٍ التحقق…",
+        invalidCode: "رمز غير صالح. حاول مرة أخرى.",
+      },
+    },
   },
   profile: {
     title: "الملف الشخصي",