@cat-factory/app 0.46.10 → 0.46.12

package/app/components/auth/AuthGate.vue

@@ -7,6 +7,7 @@ import LoginScreen from '~/components/auth/LoginScreen.vue'
 // inside the default slot, so it only fires once the user is allowed in.
 const auth = useAuthStore()
 const route = useRoute()
+const { t } = useI18n()
 
 // The password-reset page is public: a recipient of an emailed reset link is signed
 // out, so it must render even when auth is required and there's no user.
@@ -21,7 +22,7 @@ onMounted(() => auth.bootstrap())
     class="flex h-screen w-screen flex-col items-center justify-center gap-3 bg-slate-950 text-slate-400"
   >
     <UIcon name="i-lucide-loader" class="h-8 w-8 animate-spin" />
-    <span class="text-sm">Loading…</span>
+    <span class="text-sm">{{ t('auth.gate.loading') }}</span>
   </div>
 
   <slot v-else-if="isPublicRoute" />

package/app/components/auth/LoginScreen.vue

@@ -3,6 +3,7 @@ import { computed, ref } from 'vue'
 import { apiErrorEnvelope } from '~/composables/api/errors'
 
 const auth = useAuthStore()
+const { t } = useI18n()
 
 // An invite token may ride in on the URL (?invite=…) — it flows through the OAuth
 // redirect and the password signup so a brand-new user can join the org on first login.
@@ -41,8 +42,7 @@ async function submitPassword() {
     // Reload so the app boots with the new session.
     if (typeof window !== 'undefined') window.location.assign(window.location.pathname)
   } catch (e) {
-    error.value =
-      apiErrorEnvelope(e)?.message ?? 'Sign-in failed. Check your details and try again.'
+    error.value = apiErrorEnvelope(e)?.message ?? t('auth.login.signInFailed')
   } finally {
     busy.value = false
   }
@@ -56,7 +56,7 @@ async function submitForgot() {
     forgotSent.value = true
   } catch {
     // The request endpoint is generic by design; only an infra error lands here.
-    error.value = 'Something went wrong. Please try again.'
+    error.value = t('auth.login.genericError')
   } finally {
     busy.value = false
   }
@@ -81,11 +81,11 @@ const showOAuthDivider = computed(
     >
       <div class="mb-6 text-center">
         <UIcon name="i-lucide-layout-dashboard" class="mx-auto mb-3 h-10 w-10 text-indigo-400" />
-        <h1 class="mb-1 text-lg font-semibold text-white">Architecture Board</h1>
+        <h1 class="mb-1 text-lg font-semibold text-white">{{ t('auth.login.appTitle') }}</h1>
         <p class="text-sm text-slate-400">
-          <template v-if="mode === 'forgot'">Reset your password.</template>
+          <template v-if="mode === 'forgot'">{{ t('auth.login.forgotSubtitle') }}</template>
           <template v-else>{{
-            invite ? 'Accept your invitation to continue.' : 'Sign in to continue.'
+            invite ? t('auth.login.inviteSubtitle') : t('auth.login.subtitle')
           }}</template>
         </p>
       </div>
@@ -100,7 +100,7 @@ const showOAuthDivider = computed(
           icon="i-lucide-github"
           @click="auth.login(invite)"
         >
-          Continue with GitHub
+          {{ t('auth.login.continueWithGithub') }}
         </UButton>
         <UButton
           v-if="auth.providers.google"
@@ -111,7 +111,7 @@ const showOAuthDivider = computed(
           icon="i-lucide-mail"
           @click="auth.loginWithGoogle(invite)"
         >
-          Continue with Google
+          {{ t('auth.login.continueWithGoogle') }}
         </UButton>
       </div>
 
@@ -119,7 +119,8 @@ const showOAuthDivider = computed(
         v-if="showOAuthDivider && mode !== 'forgot'"
         class="my-4 flex items-center gap-3 text-xs text-slate-500"
       >
-        <span class="h-px flex-1 bg-slate-800" /> or <span class="h-px flex-1 bg-slate-800" />
+        <span class="h-px flex-1 bg-slate-800" /> {{ t('auth.login.or') }}
+        <span class="h-px flex-1 bg-slate-800" />
       </div>
 
       <!-- Email / password -->
@@ -131,7 +132,7 @@ const showOAuthDivider = computed(
         <UInput
           v-if="mode === 'signup'"
           v-model="name"
-          placeholder="Name (optional)"
+          :placeholder="t('auth.login.namePlaceholder')"
           icon="i-lucide-user"
           size="lg"
           class="w-full"
@@ -140,7 +141,7 @@ const showOAuthDivider = computed(
           v-model="email"
           type="email"
           required
-          placeholder="Email"
+          :placeholder="t('auth.login.emailPlaceholder')"
           icon="i-lucide-at-sign"
           size="lg"
           class="w-full"
@@ -149,36 +150,46 @@ const showOAuthDivider = computed(
           v-model="password"
           type="password"
           required
-          placeholder="Password"
+          :placeholder="t('auth.login.passwordPlaceholder')"
           icon="i-lucide-lock"
           size="lg"
           class="w-full"
         />
         <p v-if="error" class="text-sm text-rose-400">{{ error }}</p>
         <UButton block size="lg" color="primary" type="submit" :loading="busy">
-          {{ mode === 'signup' ? 'Create account' : 'Sign in' }}
+          {{ mode === 'signup' ? t('auth.login.createAccount') : t('auth.login.signIn') }}
         </UButton>
         <p class="text-center text-xs text-slate-400">
           <template v-if="mode === 'login'">
-            Need an account?
-            <button
-              type="button"
-              class="text-indigo-400 hover:underline"
-              @click="setMode('signup')"
-            >
-              Sign up
-            </button>
+            <i18n-t keypath="auth.login.needAccount" tag="span" scope="global">
+              <template #signUp>
+                <button
+                  type="button"
+                  class="text-indigo-400 hover:underline"
+                  @click="setMode('signup')"
+                >
+                  {{ t('auth.login.signUp') }}
+                </button>
+              </template>
+            </i18n-t>
           </template>
           <template v-else>
-            Already have an account?
-            <button type="button" class="text-indigo-400 hover:underline" @click="setMode('login')">
-              Sign in
-            </button>
+            <i18n-t keypath="auth.login.haveAccount" tag="span" scope="global">
+              <template #signIn>
+                <button
+                  type="button"
+                  class="text-indigo-400 hover:underline"
+                  @click="setMode('login')"
+                >
+                  {{ t('auth.login.signIn') }}
+                </button>
+              </template>
+            </i18n-t>
           </template>
         </p>
         <p v-if="mode === 'login'" class="text-center text-xs text-slate-400">
           <button type="button" class="text-indigo-400 hover:underline" @click="setMode('forgot')">
-            Forgot password?
+            {{ t('auth.login.forgotPassword') }}
           </button>
         </p>
       </form>
@@ -191,8 +202,7 @@ const showOAuthDivider = computed(
       >
         <template v-if="forgotSent">
           <p class="text-sm text-slate-300">
-            If an account exists for that email, a password reset link is on its way. Check your
-            inbox.
+            {{ t('auth.login.forgotSent') }}
           </p>
         </template>
         <template v-else>
@@ -200,19 +210,19 @@ const showOAuthDivider = computed(
             v-model="email"
             type="email"
             required
-            placeholder="Email"
+            :placeholder="t('auth.login.emailPlaceholder')"
             icon="i-lucide-at-sign"
             size="lg"
             class="w-full"
           />
           <p v-if="error" class="text-sm text-rose-400">{{ error }}</p>
           <UButton block size="lg" color="primary" type="submit" :loading="busy">
-            Send reset link
+            {{ t('auth.login.sendResetLink') }}
           </UButton>
         </template>
         <p class="text-center text-xs text-slate-400">
           <button type="button" class="text-indigo-400 hover:underline" @click="setMode('login')">
-            Back to sign in
+            {{ t('auth.login.backToSignIn') }}
           </button>
         </p>
       </form>

package/app/components/auth/ResetPasswordScreen.vue

@@ -5,6 +5,7 @@ import { computed, ref } from 'vue'
 // (`/reset-password?token=…`). It is a public route (see AuthGate), so a recipient who
 // is signed out can still set a new password. On success we send them to the login.
 const auth = useAuthStore()
+const { t } = useI18n()
 
 const token = computed(() => {
   if (typeof window === 'undefined') return ''
@@ -20,11 +21,11 @@ const done = ref(false)
 async function submit() {
   error.value = null
   if (password.value.length < 8) {
-    error.value = 'Password must be at least 8 characters.'
+    error.value = t('auth.resetPassword.errorTooShort')
     return
   }
   if (password.value !== confirm.value) {
-    error.value = 'Passwords do not match.'
+    error.value = t('auth.resetPassword.errorMismatch')
     return
   }
   busy.value = true
@@ -34,7 +35,7 @@ async function submit() {
   } catch (e) {
     error.value =
       (e as { data?: { error?: { message?: string } } })?.data?.error?.message ??
-      'This password reset link is invalid or has expired.'
+      t('auth.resetPassword.errorInvalidLink')
   } finally {
     busy.value = false
   }
@@ -52,23 +53,25 @@ function goToLogin() {
     >
       <div class="mb-6 text-center">
         <UIcon name="i-lucide-key-round" class="mx-auto mb-3 h-10 w-10 text-indigo-400" />
-        <h1 class="mb-1 text-lg font-semibold text-white">Reset password</h1>
-        <p class="text-sm text-slate-400">Choose a new password for your account.</p>
+        <h1 class="mb-1 text-lg font-semibold text-white">{{ t('auth.resetPassword.title') }}</h1>
+        <p class="text-sm text-slate-400">{{ t('auth.resetPassword.subtitle') }}</p>
       </div>
 
       <template v-if="done">
         <p class="mb-4 text-sm text-slate-300">
-          Your password has been reset. You can now sign in with your new password.
+          {{ t('auth.resetPassword.doneBody') }}
         </p>
-        <UButton block size="lg" color="primary" @click="goToLogin">Go to sign in</UButton>
+        <UButton block size="lg" color="primary" @click="goToLogin">{{
+          t('auth.resetPassword.goToSignIn')
+        }}</UButton>
       </template>
 
       <template v-else-if="!token">
         <p class="mb-4 text-sm text-rose-400">
-          This reset link is missing its token. Request a new link from the sign-in screen.
+          {{ t('auth.resetPassword.missingToken') }}
         </p>
         <UButton block size="lg" color="neutral" variant="subtle" @click="goToLogin">
-          Back to sign in
+          {{ t('auth.resetPassword.backToSignIn') }}
         </UButton>
       </template>
 
@@ -77,7 +80,7 @@ function goToLogin() {
           v-model="password"
           type="password"
           required
-          placeholder="New password"
+          :placeholder="t('auth.resetPassword.newPasswordPlaceholder')"
           icon="i-lucide-lock"
           size="lg"
           class="w-full"
@@ -86,18 +89,18 @@ function goToLogin() {
           v-model="confirm"
           type="password"
           required
-          placeholder="Confirm new password"
+          :placeholder="t('auth.resetPassword.confirmPasswordPlaceholder')"
           icon="i-lucide-lock"
           size="lg"
           class="w-full"
         />
         <p v-if="error" class="text-sm text-rose-400">{{ error }}</p>
         <UButton block size="lg" color="primary" type="submit" :loading="busy">
-          Reset password
+          {{ t('auth.resetPassword.submit') }}
         </UButton>
         <p class="text-center text-xs text-slate-400">
           <button type="button" class="text-indigo-400 hover:underline" @click="goToLogin">
-            Back to sign in
+            {{ t('auth.resetPassword.backToSignIn') }}
           </button>
         </p>
       </form>

package/app/components/auth/UserMenu.vue

@@ -4,20 +4,21 @@ import type { DropdownMenuItem } from '@nuxt/ui'
 // Signed-in identity + per-user actions, shown in the sidebar when auth is enabled.
 const auth = useAuthStore()
 const ui = useUiStore()
+const { t } = useI18n()
 
 const items = computed<DropdownMenuItem[][]>(() => [
   [
     {
       // The user-scoped "My setup" hub (personal GitHub token, local runners, personal
       // subscriptions) — kept out of the workspace Integrations hub, reachable here.
-      label: 'My setup',
+      label: t('auth.userMenu.mySetup'),
       icon: 'i-lucide-user-cog',
       onSelect: () => ui.openPersonalSetup(),
     },
   ],
   [
     {
-      label: 'Sign out',
+      label: t('auth.userMenu.signOut'),
       icon: 'i-lucide-log-out',
       onSelect: () => auth.logout(),
     },

package/app/components/layout/AccountDeploymentSettings.vue

@@ -11,6 +11,7 @@ const props = defineProps<{ accountId: string }>()
 
 const store = useAccountSettingsStore()
 const toast = useToast()
+const { t } = useI18n()
 
 const slack = reactive({ clientId: '', clientSecret: '', redirectUrl: '' })
 const web = reactive({ braveApiKey: '', searxngUrl: '', searxngApiKey: '' })
@@ -24,7 +25,7 @@ onMounted(async () => {
     await store.load(props.accountId)
   } catch (e) {
     toast.add({
-      title: 'Could not load deployment settings',
+      title: t('layout.accountDeployment.loadFailed'),
       description: e instanceof Error ? e.message : String(e),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
@@ -34,7 +35,7 @@ onMounted(async () => {
 
 async function saveSlack() {
   if (!slack.clientId.trim() || !slack.clientSecret.trim() || !slack.redirectUrl.trim()) {
-    toast.add({ title: 'Enter the client id, secret and redirect URL', color: 'error' })
+    toast.add({ title: t('layout.accountDeployment.slack.validation'), color: 'error' })
     return
   }
   savingSlack.value = true
@@ -51,10 +52,14 @@ async function saveSlack() {
     slack.clientId = ''
     slack.clientSecret = ''
     slack.redirectUrl = ''
-    toast.add({ title: 'Slack OAuth saved', icon: 'i-lucide-check', color: 'success' })
+    toast.add({
+      title: t('layout.accountDeployment.slack.saved'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
   } catch (e) {
     toast.add({
-      title: 'Could not save Slack OAuth',
+      title: t('layout.accountDeployment.slack.saveFailed'),
       description: e instanceof Error ? e.message : String(e),
       color: 'error',
     })
@@ -67,10 +72,14 @@ async function clearSlack() {
   savingSlack.value = true
   try {
     await store.save(props.accountId, { secrets: { slackOAuth: null } })
-    toast.add({ title: 'Slack OAuth cleared', icon: 'i-lucide-check', color: 'success' })
+    toast.add({
+      title: t('layout.accountDeployment.slack.cleared'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
   } catch (e) {
     toast.add({
-      title: 'Could not clear Slack OAuth',
+      title: t('layout.accountDeployment.slack.clearFailed'),
       description: e instanceof Error ? e.message : String(e),
       color: 'error',
     })
@@ -83,7 +92,7 @@ async function saveWeb() {
   const brave = web.braveApiKey.trim()
   const searxng = web.searxngUrl.trim()
   if (!brave && !searxng) {
-    toast.add({ title: 'Enter a Brave key or a SearXNG URL', color: 'error' })
+    toast.add({ title: t('layout.accountDeployment.web.validation'), color: 'error' })
     return
   }
   savingWeb.value = true
@@ -100,10 +109,14 @@ async function saveWeb() {
     web.braveApiKey = ''
     web.searxngUrl = ''
     web.searxngApiKey = ''
-    toast.add({ title: 'Web search keys saved', icon: 'i-lucide-check', color: 'success' })
+    toast.add({
+      title: t('layout.accountDeployment.web.saved'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
   } catch (e) {
     toast.add({
-      title: 'Could not save web search keys',
+      title: t('layout.accountDeployment.web.saveFailed'),
       description: e instanceof Error ? e.message : String(e),
       color: 'error',
     })
@@ -116,10 +129,14 @@ async function clearWeb() {
   savingWeb.value = true
   try {
     await store.save(props.accountId, { secrets: { webSearch: null } })
-    toast.add({ title: 'Web search keys cleared', icon: 'i-lucide-check', color: 'success' })
+    toast.add({
+      title: t('layout.accountDeployment.web.cleared'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
   } catch (e) {
     toast.add({
-      title: 'Could not clear web search keys',
+      title: t('layout.accountDeployment.web.clearFailed'),
       description: e instanceof Error ? e.message : String(e),
       color: 'error',
     })
@@ -132,38 +149,50 @@ async function clearWeb() {
 <template>
   <div v-if="store.available !== false" class="space-y-6">
     <div>
-      <h3 class="mb-1 font-semibold text-white">Deployment integrations</h3>
+      <h3 class="mb-1 font-semibold text-white">{{ t('layout.accountDeployment.title') }}</h3>
       <p class="text-[11px] text-slate-400">
-        Credentials shared by every workspace in this account, sealed at rest. Values are never
-        shown after saving; leave a field blank to keep the stored secret.
+        {{ t('layout.accountDeployment.intro') }}
       </p>
     </div>
 
     <!-- Slack app OAuth -->
     <section class="space-y-2">
       <div class="flex items-center gap-2">
-        <h4 class="text-sm font-semibold text-slate-200">Slack app (OAuth)</h4>
+        <h4 class="text-sm font-semibold text-slate-200">
+          {{ t('layout.accountDeployment.slack.title') }}
+        </h4>
         <UBadge
           :color="summary?.slackOAuthConfigured ? 'success' : 'neutral'"
           variant="subtle"
           size="xs"
         >
-          {{ summary?.slackOAuthConfigured ? 'Configured' : 'Not set' }}
+          {{
+            summary?.slackOAuthConfigured
+              ? t('layout.accountDeployment.configured')
+              : t('layout.accountDeployment.notSet')
+          }}
         </UBadge>
       </div>
       <p class="text-[11px] text-slate-400">
-        Enables the "Add to Slack" OAuth flow. Without it, workspaces can still connect Slack by
-        pasting a bot token.
+        {{ t('layout.accountDeployment.slack.description') }}
       </p>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
-        <UInput v-model="slack.clientId" placeholder="Client ID" size="sm" />
+        <UInput
+          v-model="slack.clientId"
+          :placeholder="t('layout.accountDeployment.slack.clientId')"
+          size="sm"
+        />
         <UInput
           v-model="slack.clientSecret"
           type="password"
-          placeholder="Client secret"
+          :placeholder="t('layout.accountDeployment.slack.clientSecret')"
+          size="sm"
+        />
+        <UInput
+          v-model="slack.redirectUrl"
+          :placeholder="t('layout.accountDeployment.slack.redirectUrl')"
           size="sm"
         />
-        <UInput v-model="slack.redirectUrl" placeholder="Redirect URL" size="sm" />
       </div>
       <div class="flex gap-2">
         <UButton
@@ -173,7 +202,7 @@ async function clearWeb() {
           :loading="savingSlack"
           @click="saveSlack"
         >
-          Save
+          {{ t('common.save') }}
         </UButton>
         <UButton
           v-if="summary?.slackOAuthConfigured"
@@ -183,7 +212,7 @@ async function clearWeb() {
           :loading="savingSlack"
           @click="clearSlack"
         >
-          Clear
+          {{ t('layout.accountDeployment.clear') }}
         </UButton>
       </div>
     </section>
@@ -191,22 +220,36 @@ async function clearWeb() {
     <!-- Web search keys -->
     <section class="space-y-2 border-t border-slate-800 pt-6">
       <div class="flex items-center gap-2">
-        <h4 class="text-sm font-semibold text-slate-200">Container web search</h4>
+        <h4 class="text-sm font-semibold text-slate-200">
+          {{ t('layout.accountDeployment.web.title') }}
+        </h4>
         <UBadge :color="summary?.webSearch ? 'success' : 'neutral'" variant="subtle" size="xs">
-          {{ summary?.webSearch ? `Configured (${summary.webSearch})` : 'Not set' }}
+          {{
+            summary?.webSearch
+              ? t('layout.accountDeployment.web.configured', { provider: summary.webSearch })
+              : t('layout.accountDeployment.notSet')
+          }}
         </UBadge>
       </div>
       <p class="text-[11px] text-slate-400">
-        The search upstream container agents reach through the backend proxy. Set a Brave key
-        (recommended), or a self-hosted SearXNG URL (with an optional bearer key).
+        {{ t('layout.accountDeployment.web.description') }}
       </p>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
-        <UInput v-model="web.braveApiKey" type="password" placeholder="Brave API key" size="sm" />
-        <UInput v-model="web.searxngUrl" placeholder="SearXNG URL" size="sm" />
+        <UInput
+          v-model="web.braveApiKey"
+          type="password"
+          :placeholder="t('layout.accountDeployment.web.braveKey')"
+          size="sm"
+        />
+        <UInput
+          v-model="web.searxngUrl"
+          :placeholder="t('layout.accountDeployment.web.searxngUrl')"
+          size="sm"
+        />
         <UInput
           v-model="web.searxngApiKey"
           type="password"
-          placeholder="SearXNG key (optional)"
+          :placeholder="t('layout.accountDeployment.web.searxngKey')"
           size="sm"
         />
       </div>
@@ -218,7 +261,7 @@ async function clearWeb() {
           :loading="savingWeb"
           @click="saveWeb"
         >
-          Save
+          {{ t('common.save') }}
         </UButton>
         <UButton
           v-if="summary?.webSearch"
@@ -228,7 +271,7 @@ async function clearWeb() {
           :loading="savingWeb"
           @click="clearWeb"
         >
-          Clear
+          {{ t('layout.accountDeployment.clear') }}
         </UButton>
       </div>
     </section>

package/app/components/layout/AccountFragmentSettings.vue

@@ -8,6 +8,7 @@ import FragmentLibraryManager from '~/components/fragments/FragmentLibraryManage
 
 const props = defineProps<{ accountId: string }>()
 const workspace = useWorkspaceStore()
+const { t } = useI18n()
 
 // Account-tier document fragments are fetched through a board's stored
 // document-source connection (credentials are per-workspace). Prefer the active
@@ -22,9 +23,7 @@ const viaWorkspaceId = computed(() => {
   <div class="space-y-6 text-sm">
     <section>
       <p class="mb-3 text-[11px] text-slate-400">
-        Best-practice guidelines shared by every board in this account. Each board inherits these
-        and can override or add its own. Code-aware agents (coder, reviewer, architect, fixers) fold
-        the relevant ones into their prompt.
+        {{ t('layout.accountFragments.intro') }}
       </p>
       <FragmentLibraryManager
         kind="account"