From bc43af00611ea87586389b258c4a274ee0604da9 Mon Sep 17 00:00:00 2001
From: "Maksym Hryzodub [DREAM]" <maksym.hryzodub@dreamvention.com>
Date: Wed, 19 Aug 2026 16:44:39 +0300
Subject: [PATCH 1/2] feat(app): extract the user slice into i18n, en+ru
 (CLEAN-37)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The auth screens were fully hardcoded and the slice had no i18n block at
all. Adds one (registering the shared LOCALES) plus en/ru locale files,
and moves all 39 strings out of the templates: the form, the marketing
panel on the auth layout, and the closed-registration state.

Applies the "script holds keys, not text" rule from the ADR, which this
slice is the reason for. Field validation now assigns
'account.email_invalid' rather than "Enter a valid email"; the
state-dependent title, subtitle and submit label became *Key computeds
rendered with $t. Both providers lose their hardcoded English failure
fallback — the form owns that copy and picks the key by mode, so a
provider now reports only whether the call failed and what the server
said. useI18n() is not used anywhere in the slice.

Adds a guard to i18n-sync for the bug this uncovered: "jane@example.com"
compiles to a linked-message reference in vue-i18n and fails the build.
The escaped literal {'@'} is now required, i18n:check reports a bare @
or | on either side, the translator prompt states the rule, and a reply
that breaks it is rejected before it reaches disk. Worth catching there
because CI runs typecheck/lint/test and this script — not nuxt build —
so a broken message would otherwise surface in production.

Verified: nuxt typecheck and nuxt build clean, ru strings in the client
chunks, i18n:check green over 5 slice/locale pairs, and a re-scan finds
zero hardcoded strings left in the slice.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 app/i18n.sync.json                            | 42 +++++++++
 .../user/auth/components/auth/common/Form.vue | 91 +++++++++++--------
 .../auth/components/auth/login/Provider.vue   |  7 +-
 .../components/auth/register/Provider.vue     | 14 +--
 app/slices/user/auth/i18n/locales/en.json     | 46 ++++++++++
 app/slices/user/auth/i18n/locales/ru.json     | 46 ++++++++++
 app/slices/user/auth/layouts/auth.vue         | 23 +++--
 app/slices/user/auth/nuxt.config.ts           |  7 ++
 scripts/i18n-sync.ts                          | 34 ++++++-
 9 files changed, 251 insertions(+), 59 deletions(-)
 create mode 100644 app/slices/user/auth/i18n/locales/en.json
 create mode 100644 app/slices/user/auth/i18n/locales/ru.json

diff --git a/app/i18n.sync.json b/app/i18n.sync.json
index ba9dd67e..50e804a0 100644
--- a/app/i18n.sync.json
+++ b/app/i18n.sync.json
@@ -79,6 +79,48 @@
       "template_image": "140d5d5895d7",
       "template_name": "f95e97c2f767",
       "templates": "56b564b75c7f"
+    },
+    "user/auth:ru": {
+      "account.closed_body": "0be53513ddac",
+      "account.closed_cta": "27a0d553bf29",
+      "account.closed_title": "dd5e053a970d",
+      "account.create_account": "86033f75a4c0",
+      "account.create_subtitle": "c5aff35f38e9",
+      "account.create_title": "9e709348f582",
+      "account.email_invalid": "c6e81fdf78b3",
+      "account.email_label": "969ccbd3cf63",
+      "account.email_placeholder": "9a17bdc59659",
+      "account.email_required": "aae929110124",
+      "account.have_account": "e77fea936d3e",
+      "account.login_failed": "5a96e8452f1e",
+      "account.name_label": "dcd1d5223f73",
+      "account.name_placeholder": "01332c876518",
+      "account.name_required": "604fd1b2e29c",
+      "account.need_access": "ab1a55b13fa2",
+      "account.new_here": "38c1c4457cd1",
+      "account.password_hide": "a60a56c584b3",
+      "account.password_hint": "e4e54a0028c8",
+      "account.password_label": "e7cf3ef4f17c",
+      "account.password_required": "7aeae1412484",
+      "account.password_show": "6aeaa6a53d09",
+      "account.password_too_short": "977f3b2676a9",
+      "account.register_failed": "d40e3b08ef50",
+      "account.sign_in": "bfd402b2f6f3",
+      "account.submit_login": "bfd402b2f6f3",
+      "account.submit_login_pending": "8b9d3de8ae00",
+      "account.submit_register": "798ca2ce18bf",
+      "account.submit_register_pending": "f2daf61e527b",
+      "account.welcome_subtitle": "c2eae8162dd8",
+      "account.welcome_title": "6621249514b7",
+      "promo.back_to_landing": "a0653cf86b3c",
+      "promo.badge": "de065a5c850b",
+      "promo.feature_deploy": "b8d686e626c7",
+      "promo.feature_state": "dcb893a52450",
+      "promo.feature_streaming": "eb803528b70d",
+      "promo.footer": "8f3bab563458",
+      "promo.lede": "0877d8f80ff2",
+      "promo.title": "9f28248b81cc",
+      "promo.title_accent": "09659d3fbc68"
     }
   }
 }
diff --git a/app/slices/user/auth/components/auth/common/Form.vue b/app/slices/user/auth/components/auth/common/Form.vue
index b5053ba7..482d6ee3 100644
--- a/app/slices/user/auth/components/auth/common/Form.vue
+++ b/app/slices/user/auth/components/auth/common/Form.vue
@@ -4,7 +4,10 @@ type Mode = 'login' | 'register';
 const props = defineProps<{
   mode: Mode;
   submitting?: boolean;
+  /** Human text from the API — already English, not a key. Null when the call
+   *  failed without a usable message, in which case `failed` drives our copy. */
   errorMessage?: string | null;
+  failed?: boolean;
   registrationEnabled?: boolean;
 }>();
 
@@ -13,6 +16,9 @@ const emit = defineEmits<{
 }>();
 
 const form = reactive({ name: '', email: '', password: '' });
+// Validation state holds i18n KEYS, not sentences: the template renders them
+// with $t. Keeping the text here would hide user-visible copy inside branching
+// logic, where the next extraction pass would never find it.
 const errors = reactive<
   Partial<Record<'name' | 'email' | 'password', string>>
 >({});
@@ -24,21 +30,23 @@ const showPassword = ref(false);
 function validateField(field: 'name' | 'email' | 'password') {
   if (field === 'name') {
     errors.name =
-      props.mode === 'register' && !form.name.trim() ? 'Name is required' : undefined;
+      props.mode === 'register' && !form.name.trim()
+        ? 'account.name_required'
+        : undefined;
     return;
   }
   if (field === 'email') {
     const email = form.email.trim();
-    if (!email) errors.email = 'Email is required';
+    if (!email) errors.email = 'account.email_required';
     else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
-      errors.email = 'Enter a valid email';
+      errors.email = 'account.email_invalid';
     else errors.email = undefined;
     return;
   }
   if (field === 'password') {
-    if (!form.password) errors.password = 'Password is required';
+    if (!form.password) errors.password = 'account.password_required';
     else if (props.mode === 'register' && form.password.length < 8)
-      errors.password = 'At least 8 characters';
+      errors.password = 'account.password_too_short';
     else errors.password = undefined;
   }
 }
@@ -65,24 +73,29 @@ function onSubmit() {
   });
 }
 
-const title = computed(() =>
-  props.mode === 'login' ? 'Welcome back' : 'Create your account',
+const titleKey = computed(() =>
+  props.mode === 'login' ? 'account.welcome_title' : 'account.create_title',
 );
 
-const subtitle = computed(() =>
+const subtitleKey = computed(() =>
   props.mode === 'login'
-    ? 'Sign in to manage your agents.'
-    : 'Get started with your AI workers.',
+    ? 'account.welcome_subtitle'
+    : 'account.create_subtitle',
 );
 
-const submitLabel = computed(() =>
-  props.submitting
-    ? props.mode === 'login'
-      ? 'Signing in…'
-      : 'Creating account…'
-    : props.mode === 'login'
-      ? 'Sign in'
-      : 'Create account',
+const submitLabelKey = computed(() => {
+  if (props.submitting) {
+    return props.mode === 'login'
+      ? 'account.submit_login_pending'
+      : 'account.submit_register_pending';
+  }
+  return props.mode === 'login'
+    ? 'account.submit_login'
+    : 'account.submit_register';
+});
+
+const failureKey = computed(() =>
+  props.mode === 'login' ? 'account.login_failed' : 'account.register_failed',
 );
 
 const inputClass = (field: 'name' | 'email' | 'password') =>
@@ -103,8 +116,8 @@ function showError(field: 'name' | 'email' | 'password') {
 <template>
   <div>
     <div class="mb-8">
-      <h1 class="text-2xl font-bold tracking-tight">{{ title }}</h1>
-      <p class="mt-1.5 text-sm text-muted-foreground">{{ subtitle }}</p>
+      <h1 class="text-2xl font-bold tracking-tight">{{ $t(titleKey) }}</h1>
+      <p class="mt-1.5 text-sm text-muted-foreground">{{ $t(subtitleKey) }}</p>
     </div>
 
     <form class="space-y-4" novalidate @submit.prevent="onSubmit">
@@ -113,7 +126,7 @@ function showError(field: 'name' | 'email' | 'password') {
           for="auth-name"
           class="mb-1.5 block text-xs font-medium text-foreground/80"
         >
-          Name
+          {{ $t('account.name_label') }}
         </label>
         <div class="relative">
           <Icon
@@ -126,7 +139,7 @@ function showError(field: 'name' | 'email' | 'password') {
             v-model="form.name"
             type="text"
             autocomplete="name"
-            placeholder="Jane Doe"
+            :placeholder="$t('account.name_placeholder')"
             :aria-invalid="showError('name')"
             :class="inputClass('name')"
             @blur="onBlur('name')"
@@ -137,7 +150,7 @@ function showError(field: 'name' | 'email' | 'password') {
           class="mt-1.5 text-xs text-destructive flex items-center gap-1"
         >
           <Icon name="alert-circle" :size="12" />
-          {{ errors.name }}
+          {{ $t(errors.name!) }}
         </p>
       </div>
 
@@ -146,7 +159,7 @@ function showError(field: 'name' | 'email' | 'password') {
           for="auth-email"
           class="mb-1.5 block text-xs font-medium text-foreground/80"
         >
-          Email
+          {{ $t('account.email_label') }}
         </label>
         <div class="relative">
           <Icon
@@ -159,7 +172,7 @@ function showError(field: 'name' | 'email' | 'password') {
             v-model="form.email"
             type="email"
             autocomplete="email"
-            placeholder="jane@example.com"
+            :placeholder="$t('account.email_placeholder')"
             :aria-invalid="showError('email')"
             :class="inputClass('email')"
             @blur="onBlur('email')"
@@ -170,7 +183,7 @@ function showError(field: 'name' | 'email' | 'password') {
           class="mt-1.5 text-xs text-destructive flex items-center gap-1"
         >
           <Icon name="alert-circle" :size="12" />
-          {{ errors.email }}
+          {{ $t(errors.email!) }}
         </p>
       </div>
 
@@ -180,13 +193,13 @@ function showError(field: 'name' | 'email' | 'password') {
             for="auth-password"
             class="block text-xs font-medium text-foreground/80"
           >
-            Password
+            {{ $t('account.password_label') }}
           </label>
           <span
             v-if="mode === 'register'"
             class="text-xs text-muted-foreground"
           >
-            Min 8 characters
+            {{ $t('account.password_hint') }}
           </span>
         </div>
         <div class="relative">
@@ -208,7 +221,9 @@ function showError(field: 'name' | 'email' | 'password') {
           <button
             type="button"
             class="absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted transition"
-            :aria-label="showPassword ? 'Hide password' : 'Show password'"
+            :aria-label="
+              $t(showPassword ? 'account.password_hide' : 'account.password_show')
+            "
             @click="showPassword = !showPassword"
           >
             <Icon :name="showPassword ? 'eye-off' : 'eye'" :size="16" />
@@ -219,7 +234,7 @@ function showError(field: 'name' | 'email' | 'password') {
           class="mt-1.5 text-xs text-destructive flex items-center gap-1"
         >
           <Icon name="alert-circle" :size="12" />
-          {{ errors.password }}
+          {{ $t(errors.password!) }}
         </p>
       </div>
 
@@ -232,11 +247,11 @@ function showError(field: 'name' | 'email' | 'password') {
         leave-to-class="opacity-0"
       >
         <div
-          v-if="errorMessage"
+          v-if="failed || errorMessage"
           class="flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 p-3 text-xs text-destructive"
         >
           <Icon name="alert-triangle" :size="14" class="mt-px shrink-0" />
-          <span>{{ errorMessage }}</span>
+          <span>{{ errorMessage ?? $t(failureKey) }}</span>
         </div>
       </Transition>
 
@@ -251,7 +266,7 @@ function showError(field: 'name' | 'email' | 'password') {
           :size="16"
           class="animate-spin"
         />
-        {{ submitLabel }}
+        {{ $t(submitLabelKey) }}
         <Icon
           v-if="!submitting"
           name="arrow-right"
@@ -264,19 +279,19 @@ function showError(field: 'name' | 'email' | 'password') {
     <div class="mt-6 text-center text-sm text-muted-foreground">
       <template v-if="mode === 'login'">
         <span v-if="registrationEnabled">
-          New here?
+          {{ $t('account.new_here') }}
           <NuxtLink to="/register" class="font-medium text-foreground hover:text-primary transition">
-            Create an account
+            {{ $t('account.create_account') }}
           </NuxtLink>
         </span>
         <span v-else>
-          Need access? Ask an admin to invite you.
+          {{ $t('account.need_access') }}
         </span>
       </template>
       <template v-else>
-        Already have an account?
+        {{ $t('account.have_account') }}
         <NuxtLink to="/login" class="font-medium text-foreground hover:text-primary transition">
-          Sign in
+          {{ $t('account.sign_in') }}
         </NuxtLink>
       </template>
     </div>
diff --git a/app/slices/user/auth/components/auth/login/Provider.vue b/app/slices/user/auth/components/auth/login/Provider.vue
index 68d18994..dcb8252e 100644
--- a/app/slices/user/auth/components/auth/login/Provider.vue
+++ b/app/slices/user/auth/components/auth/login/Provider.vue
@@ -10,10 +10,12 @@ await useAsyncData('app-auth-login-registration-enabled', () =>
 
 const submitting = ref(false);
 const errorMessage = ref<string | null>(null);
+const failed = ref(false);
 
 async function onSubmit(values: { email: string; password: string }) {
   submitting.value = true;
   errorMessage.value = null;
+  failed.value = false;
   try {
     await authStore.login(values.email, values.password);
     const target =
@@ -26,8 +28,8 @@ async function onSubmit(values: { email: string; password: string }) {
       response?: { data?: { message?: string } };
       message?: string;
     };
-    errorMessage.value =
-      e?.response?.data?.message ?? e?.message ?? 'Login failed';
+    failed.value = true;
+    errorMessage.value = e?.response?.data?.message ?? e?.message ?? null;
   } finally {
     submitting.value = false;
   }
@@ -39,6 +41,7 @@ async function onSubmit(values: { email: string; password: string }) {
     mode="login"
     :submitting="submitting"
     :error-message="errorMessage"
+    :failed="failed"
     :registration-enabled="registrationEnabled"
     @submit="onSubmit"
   />
diff --git a/app/slices/user/auth/components/auth/register/Provider.vue b/app/slices/user/auth/components/auth/register/Provider.vue
index 4a56da5d..d1001fbb 100644
--- a/app/slices/user/auth/components/auth/register/Provider.vue
+++ b/app/slices/user/auth/components/auth/register/Provider.vue
@@ -6,6 +6,7 @@ await useAsyncData('app-auth-registration-enabled', () => refresh());
 
 const submitting = ref(false);
 const errorMessage = ref<string | null>(null);
+const failed = ref(false);
 
 async function onSubmit(values: {
   name?: string;
@@ -15,6 +16,7 @@ async function onSubmit(values: {
   if (!enabled.value || !values.name) return;
   submitting.value = true;
   errorMessage.value = null;
+  failed.value = false;
   try {
     await authStore.register(values.name, values.email, values.password);
     await navigateTo('/agents');
@@ -23,8 +25,8 @@ async function onSubmit(values: {
       response?: { data?: { message?: string } };
       message?: string;
     };
-    errorMessage.value =
-      e?.response?.data?.message ?? e?.message ?? 'Registration failed';
+    failed.value = true;
+    errorMessage.value = e?.response?.data?.message ?? e?.message ?? null;
   } finally {
     submitting.value = false;
   }
@@ -45,16 +47,15 @@ async function onSubmit(values: {
       >
         <Icon name="lock" :size="22" />
       </div>
-      <h1 class="mt-4 text-lg font-semibold">Registration is closed</h1>
+      <h1 class="mt-4 text-lg font-semibold">{{ $t('account.closed_title') }}</h1>
       <p class="mt-1.5 text-sm text-muted-foreground">
-        The administrator has disabled self-service signup.
-        Ask an admin to invite you, or sign in with an existing account.
+        {{ $t('account.closed_body') }}
       </p>
       <NuxtLink
         to="/login"
         class="mt-5 inline-flex items-center gap-1.5 rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:opacity-95 transition"
       >
-        Go to sign in
+        {{ $t('account.closed_cta') }}
         <Icon name="arrow-right" :size="14" />
       </NuxtLink>
     </div>
@@ -65,6 +66,7 @@ async function onSubmit(values: {
     mode="register"
     :submitting="submitting"
     :error-message="errorMessage"
+    :failed="failed"
     :registration-enabled="true"
     @submit="onSubmit"
   />
diff --git a/app/slices/user/auth/i18n/locales/en.json b/app/slices/user/auth/i18n/locales/en.json
new file mode 100644
index 00000000..3a3cb039
--- /dev/null
+++ b/app/slices/user/auth/i18n/locales/en.json
@@ -0,0 +1,46 @@
+{
+  "account": {
+    "welcome_title": "Welcome back",
+    "welcome_subtitle": "Sign in to manage your agents.",
+    "create_title": "Create your account",
+    "create_subtitle": "Get started with your AI workers.",
+    "name_label": "Name",
+    "name_placeholder": "Jane Doe",
+    "name_required": "Name is required",
+    "email_label": "Email",
+    "email_placeholder": "jane{'@'}example.com",
+    "email_required": "Email is required",
+    "email_invalid": "Enter a valid email",
+    "password_label": "Password",
+    "password_hint": "Min 8 characters",
+    "password_required": "Password is required",
+    "password_too_short": "At least 8 characters",
+    "password_show": "Show password",
+    "password_hide": "Hide password",
+    "submit_login": "Sign in",
+    "submit_login_pending": "Signing in…",
+    "submit_register": "Create account",
+    "submit_register_pending": "Creating account…",
+    "login_failed": "Login failed",
+    "register_failed": "Registration failed",
+    "new_here": "New here?",
+    "create_account": "Create an account",
+    "need_access": "Need access? Ask an admin to invite you.",
+    "have_account": "Already have an account?",
+    "sign_in": "Sign in",
+    "closed_title": "Registration is closed",
+    "closed_body": "The administrator has disabled self-service signup. Ask an admin to invite you, or sign in with an existing account.",
+    "closed_cta": "Go to sign in"
+  },
+  "promo": {
+    "badge": "Live on Kubernetes",
+    "title": "Deploy AI agents.",
+    "title_accent": "Talk to them in real time.",
+    "lede": "Ranch spins up containerized AI workers on a managed cluster and gives you a streaming chat to drive them. No DevOps required.",
+    "feature_deploy": "One-click agent deploy on Argo Workflows",
+    "feature_streaming": "Token-by-token streaming chat over WebSocket",
+    "feature_state": "Persistent agent state synced to S3",
+    "footer": "Built on CleanSlice · {year}",
+    "back_to_landing": "Back to landing"
+  }
+}
diff --git a/app/slices/user/auth/i18n/locales/ru.json b/app/slices/user/auth/i18n/locales/ru.json
new file mode 100644
index 00000000..62aac06f
--- /dev/null
+++ b/app/slices/user/auth/i18n/locales/ru.json
@@ -0,0 +1,46 @@
+{
+  "account": {
+    "welcome_title": "С возвращением",
+    "welcome_subtitle": "Войдите, чтобы управлять агентами.",
+    "create_title": "Создайте аккаунт",
+    "create_subtitle": "Начните работу с AI-воркерами.",
+    "name_label": "Имя",
+    "name_placeholder": "Иван Иванов",
+    "name_required": "Укажите имя",
+    "email_label": "Email",
+    "email_placeholder": "jane{'@'}example.com",
+    "email_required": "Укажите email",
+    "email_invalid": "Введите корректный email",
+    "password_label": "Пароль",
+    "password_hint": "Минимум 8 символов",
+    "password_required": "Укажите пароль",
+    "password_too_short": "Не менее 8 символов",
+    "password_show": "Показать пароль",
+    "password_hide": "Скрыть пароль",
+    "submit_login": "Войти",
+    "submit_login_pending": "Вход…",
+    "submit_register": "Создать аккаунт",
+    "submit_register_pending": "Создание аккаунта…",
+    "login_failed": "Не удалось войти",
+    "register_failed": "Не удалось зарегистрироваться",
+    "new_here": "Впервые здесь?",
+    "create_account": "Создать аккаунт",
+    "need_access": "Нужен доступ? Попросите администратора отправить приглашение.",
+    "have_account": "Уже есть аккаунт?",
+    "sign_in": "Войти",
+    "closed_title": "Регистрация закрыта",
+    "closed_body": "Администратор отключил самостоятельную регистрацию. Попросите администратора отправить приглашение или войдите в существующий аккаунт.",
+    "closed_cta": "Перейти ко входу"
+  },
+  "promo": {
+    "badge": "Работает на Kubernetes",
+    "title": "Разворачивайте AI-агентов.",
+    "title_accent": "Общайтесь с ними в реальном времени.",
+    "lede": "Ranch запускает контейнеризованных AI-воркеров в управляемом кластере и даёт потоковый чат для работы с ними. DevOps не нужен.",
+    "feature_deploy": "Развёртывание агента в один клик на Argo Workflows",
+    "feature_streaming": "Потоковый чат по токенам через WebSocket",
+    "feature_state": "Постоянное состояние агента с синхронизацией в S3",
+    "footer": "Создано на CleanSlice · {year}",
+    "back_to_landing": "На главную"
+  }
+}
diff --git a/app/slices/user/auth/layouts/auth.vue b/app/slices/user/auth/layouts/auth.vue
index 37153195..4e662163 100644
--- a/app/slices/user/auth/layouts/auth.vue
+++ b/app/slices/user/auth/layouts/auth.vue
@@ -21,7 +21,7 @@
           >
             <Icon name="tractor" :size="20" />
           </span>
-          Ranch
+          {{ $t('app_name') }}
         </NuxtLink>
 
         <div class="relative space-y-6">
@@ -29,17 +29,16 @@
             class="inline-flex items-center gap-2 rounded-full border bg-background/60 backdrop-blur px-3 py-1 text-xs text-muted-foreground"
           >
             <span class="w-2 h-2 rounded-full bg-green-500" />
-            Live on Kubernetes
+            {{ $t('promo.badge') }}
           </div>
 
           <h2 class="text-3xl font-bold tracking-tight leading-tight">
-            Deploy AI agents.<br />
-            <span class="text-primary">Talk to them in real time.</span>
+            {{ $t('promo.title') }}<br />
+            <span class="text-primary">{{ $t('promo.title_accent') }}</span>
           </h2>
 
           <p class="text-sm text-muted-foreground max-w-md leading-relaxed">
-            Ranch spins up containerized AI workers on a managed cluster
-            and gives you a streaming chat to drive them. No DevOps required.
+            {{ $t('promo.lede') }}
           </p>
 
           <ul class="space-y-3 text-sm text-muted-foreground">
@@ -49,7 +48,7 @@
                 :size="16"
                 class="mt-0.5 text-primary shrink-0"
               />
-              <span>One-click agent deploy on Argo Workflows</span>
+              <span>{{ $t('promo.feature_deploy') }}</span>
             </li>
             <li class="flex items-start gap-3">
               <Icon
@@ -57,7 +56,7 @@
                 :size="16"
                 class="mt-0.5 text-primary shrink-0"
               />
-              <span>Token-by-token streaming chat over WebSocket</span>
+              <span>{{ $t('promo.feature_streaming') }}</span>
             </li>
             <li class="flex items-start gap-3">
               <Icon
@@ -65,13 +64,13 @@
                 :size="16"
                 class="mt-0.5 text-primary shrink-0"
               />
-              <span>Persistent agent state synced to S3</span>
+              <span>{{ $t('promo.feature_state') }}</span>
             </li>
           </ul>
         </div>
 
         <p class="relative text-xs text-muted-foreground/70">
-          Built on CleanSlice · {{ year }}
+          {{ $t('promo.footer', { year }) }}
         </p>
       </aside>
 
@@ -89,13 +88,13 @@
             >
               <Icon name="tractor" :size="16" />
             </span>
-            Ranch
+            {{ $t('app_name') }}
           </NuxtLink>
           <NuxtLink
             to="/"
             class="ml-auto inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition"
           >
-            <Icon name="arrow-left" :size="14" /> Back to landing
+            <Icon name="arrow-left" :size="14" /> {{ $t('promo.back_to_landing') }}
           </NuxtLink>
         </header>
 
diff --git a/app/slices/user/auth/nuxt.config.ts b/app/slices/user/auth/nuxt.config.ts
index 5f754756..31ce1290 100644
--- a/app/slices/user/auth/nuxt.config.ts
+++ b/app/slices/user/auth/nuxt.config.ts
@@ -1,10 +1,17 @@
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
 
+import { LOCALES } from '../../setup/i18n/locales';
+
 const currentDir = dirname(fileURLToPath(import.meta.url));
 
 export default defineNuxtConfig({
   alias: { '#auth': currentDir },
+  modules: ['@nuxtjs/i18n'],
+  i18n: {
+    langDir: 'locales',
+    locales: LOCALES,
+  },
   imports: {
     dirs: [`${currentDir}/stores`, `${currentDir}/composables`],
   },
diff --git a/scripts/i18n-sync.ts b/scripts/i18n-sync.ts
index 5d325028..2d52534a 100644
--- a/scripts/i18n-sync.ts
+++ b/scripts/i18n-sync.ts
@@ -84,6 +84,18 @@ function hash(value: string): string {
   return createHash('sha256').update(value).digest('hex').slice(0, 12);
 }
 
+/**
+ * vue-i18n compiles every message: a bare `@` starts a linked-message reference
+ * and a bare `|` starts a plural branch, so `jane@example.com` fails the build
+ * with a compiler error. Both must be written as literals — `jane{'@'}mail.com`.
+ * Worth checking here because CI runs typecheck/lint/test and this script, not
+ * `nuxt build` — without this guard a broken message reaches production.
+ */
+function unsafeMessage(value: string): boolean {
+  const withoutLiterals = value.replace(/\{'[^']*'\}/g, '').replace(/\{\s*\w+\s*\}/g, '');
+  return /[@|]/.test(withoutLiterals);
+}
+
 // ------------------------------------------------------------------ discovery
 
 /** Every `<slice>/i18n/locales` directory under app/slices, at any nesting. */
@@ -116,6 +128,8 @@ type Work = {
   unrecorded: string[];
   /** Keys the target has but English no longer does. */
   orphaned: string[];
+  /** Keys whose text would fail the vue-i18n message compiler. */
+  invalid: string[];
 };
 
 function plan(manifest: Manifest): Work[] {
@@ -148,6 +162,12 @@ function plan(manifest: Manifest): Work[] {
         stale: present.filter((k) => known[k] !== undefined && known[k] !== hash(source[k]!)),
         unrecorded: present.filter((k) => known[k] === undefined),
         orphaned: Object.keys(target).filter((k) => !(k in source)),
+        // Both sides: an unescaped @ in en.json breaks the build just as surely
+        // as one the model wrote into ru.json.
+        invalid: [
+          ...Object.keys(source).filter((k) => unsafeMessage(source[k]!)),
+          ...Object.keys(target).filter((k) => unsafeMessage(target[k]!)),
+        ].filter((k, i, all) => all.indexOf(k) === i),
       });
     }
   }
@@ -181,6 +201,7 @@ const SYSTEM_PROMPT = [
   '- Return ONLY a JSON object mapping each key you were given to its translation.',
   '- Translate the value, never the key.',
   '- Keep placeholders exactly as they appear: {name}, {count}, @:some.key, and any HTML.',
+  "- Never write a bare @ or | — vue-i18n reads them as control characters. An escaped literal such as {'@'} must come back verbatim.",
   '- Do not translate product or component names: Ranch, Bridle, Paddock, Kubernetes, Argo Workflows, Docker.',
   '- Match the register of a modern product UI: short, direct, no marketing filler.',
   '- Keep the ending punctuation and letter case style of the source string.',
@@ -222,6 +243,9 @@ async function translate(
       const parsed = JSON.parse(text) as Record<string, unknown>;
       const missing = Object.keys(entries).filter((k) => typeof parsed[k] !== 'string');
       if (missing.length) throw new Error(`missing keys in reply: ${missing.join(', ')}`);
+      const broken = Object.keys(entries).filter((k) => unsafeMessage(parsed[k] as string));
+      if (broken.length)
+        throw new Error(`unescaped @ or | in reply: ${broken.join(', ')}`);
       return parsed as FlatMessages;
     } catch (error) {
       if (attempt === 2) throw new Error(`${slice} → ${locale}: ${(error as Error).message}`);
@@ -243,10 +267,18 @@ function report(work: Work[]): number {
     if (item.unrecorded.length)
       lines.push(`  unrecorded (${item.unrecorded.length}): ${item.unrecorded.join(', ')}`);
     if (item.orphaned.length) lines.push(`  orphaned (${item.orphaned.length}): ${item.orphaned.join(', ')}`);
+    if (item.invalid.length)
+      lines.push(
+        `  unescaped @ or | (${item.invalid.length}): ${item.invalid.join(', ')} — write them as {'@'} / {'|'}`,
+      );
     if (!lines.length) continue;
 
     problems +=
-      item.missing.length + item.stale.length + item.unrecorded.length + item.orphaned.length;
+      item.missing.length +
+      item.stale.length +
+      item.unrecorded.length +
+      item.orphaned.length +
+      item.invalid.length;
     console.error(`${item.slice.name} → ${item.locale}`);
     for (const line of lines) console.error(line);
   }

From 1ced349719e9aa74a23f49c45a709b97fd41574f Mon Sep 17 00:00:00 2001
From: "Maksym Hryzodub [DREAM]" <maksym.hryzodub@dreamvention.com>
Date: Wed, 19 Aug 2026 17:07:49 +0300
Subject: [PATCH 2/2] ci: run CI on every pull request, not only those
 targeting main (CLEAN-37)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The i18n work lands as a stack: each subtask branches off the previous
one and the whole chain merges bottom-up at the end. With
`pull_request: branches: [main]` none of those PRs triggers CI — #31 has
zero workflow runs — so the first real check would happen at the final
merge, on four slices at once.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .github/workflows/ci.yaml | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index ff462519..4f27f1cf 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -1,8 +1,11 @@
 name: CI
 
 on:
+  # Every pull request, not just the ones targeting main: stacked PRs (a chain
+  # of branches merged bottom-up at the end) target their parent branch, and
+  # with a `branches: [main]` filter they would ride all the way to the final
+  # merge without a single CI run.
   pull_request:
-    branches: [main]
   push:
     branches: [main]