@cat-factory/app 0.46.11 → 0.46.12

package/app/components/layout/AccountTeamSettings.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { apiErrorEnvelope } from '~/composables/api/errors'
 import type { AccountRole } from '~/types/domain'
+import type { InvitationStatus } from '@cat-factory/contracts'
 import AccountDeploymentSettings from '~/components/layout/AccountDeploymentSettings.vue'
 
 // Team settings for an org account: the member roster (with combinable admin /
@@ -12,13 +13,31 @@ const props = defineProps<{ accountId: string }>()
 
 const accounts = useAccountsStore()
 const toast = useToast()
+const { t, te } = useI18n()
 const busy = ref(false)
 
-const ROLE_ITEMS: { label: string; value: AccountRole }[] = [
-  { label: 'Admin', value: 'admin' },
-  { label: 'Developer', value: 'developer' },
-  { label: 'Product', value: 'product' },
-]
+const ROLE_ITEMS = computed<{ label: string; value: AccountRole }[]>(() => [
+  { label: t('layout.accountTeam.roles.admin'), value: 'admin' },
+  { label: t('layout.accountTeam.roles.developer'), value: 'developer' },
+  { label: t('layout.accountTeam.roles.product'), value: 'product' },
+])
+
+const EMAIL_PROVIDER_ITEMS = computed(() => [
+  { label: t('layout.accountTeam.email.providers.resend'), value: 'resend' as const },
+  { label: t('layout.accountTeam.email.providers.sendgrid'), value: 'sendgrid' as const },
+])
+
+// Invitation status is a closed contract union; map each member to a literal key so the
+// typed-message-key check stays live, with a te()-guarded fallback if a locale omits one.
+const INVITATION_STATUS_KEYS: Record<InvitationStatus, string> = {
+  pending: 'layout.accountTeam.invite.status.pending',
+  accepted: 'layout.accountTeam.invite.status.accepted',
+  revoked: 'layout.accountTeam.invite.status.revoked',
+}
+function invitationStatusLabel(status: InvitationStatus): string {
+  const key = INVITATION_STATUS_KEYS[status]
+  return te(key) ? t(key) : status
+}
 
 /** Whether the signed-in caller is an admin of this account (drives edit affordances). */
 const isAdmin = computed(() => accounts.activeAccount?.roles?.includes('admin') ?? false)
@@ -33,7 +52,7 @@ async function updateMemberRoles(userId: string, roles: AccountRole[]) {
   try {
     await accounts.setMemberRoles(props.accountId, userId, roles.length ? roles : ['developer'])
   } catch (e) {
-    notifyError('Could not update roles', e)
+    notifyError(t('layout.accountTeam.errors.updateRoles'), e)
   }
 }
 
@@ -53,7 +72,7 @@ async function loadAll(accountId: string) {
     if (isOrg.value) jobs.push(accounts.loadRoster(accountId))
     await Promise.all(jobs)
   } catch (e) {
-    notifyError('Could not load team settings', e)
+    notifyError(t('layout.accountTeam.errors.loadSettings'), e)
   }
 }
 
@@ -77,9 +96,9 @@ async function createOrganization() {
   try {
     await accounts.createOrg(name)
     newOrgName.value = ''
-    toast.add({ title: 'Organization created', icon: 'i-lucide-check' })
+    toast.add({ title: t('layout.accountTeam.org.created'), icon: 'i-lucide-check' })
   } catch (e) {
-    notifyError('Could not create organization', e)
+    notifyError(t('layout.accountTeam.errors.createOrg'), e)
   } finally {
     busy.value = false
   }
@@ -100,14 +119,14 @@ async function sendInvite() {
     )
     inviteEmail.value = ''
     toast.add({
-      title: 'Invitation created',
+      title: t('layout.accountTeam.invite.created'),
       description: acceptUrl
-        ? 'An email was sent (or copy the link from the list below).'
-        : 'Share the accept link with your teammate.',
+        ? t('layout.accountTeam.invite.createdEmailed')
+        : t('layout.accountTeam.invite.createdShareLink'),
       icon: 'i-lucide-mail-check',
     })
   } catch (e) {
-    notifyError('Could not send invitation', e)
+    notifyError(t('layout.accountTeam.errors.sendInvite'), e)
   } finally {
     busy.value = false
   }
@@ -117,7 +136,7 @@ async function revoke(id: string) {
   try {
     await accounts.revokeInvite(props.accountId, id)
   } catch (e) {
-    notifyError('Could not revoke invitation', e)
+    notifyError(t('layout.accountTeam.errors.revokeInvite'), e)
   }
 }
 
@@ -136,9 +155,9 @@ async function connectEmail() {
       fromAddress: emailFrom.value.trim(),
     })
     emailApiKey.value = ''
-    toast.add({ title: 'Email sender connected', icon: 'i-lucide-check' })
+    toast.add({ title: t('layout.accountTeam.email.connected'), icon: 'i-lucide-check' })
   } catch (e) {
-    notifyError('Could not connect email sender', e)
+    notifyError(t('layout.accountTeam.errors.connectEmail'), e)
   } finally {
     busy.value = false
   }
@@ -149,7 +168,7 @@ async function disconnectEmail() {
   try {
     await accounts.disconnectEmail(props.accountId)
   } catch (e) {
-    notifyError('Could not disconnect email sender', e)
+    notifyError(t('layout.accountTeam.errors.disconnectEmail'), e)
   } finally {
     busy.value = false
   }
@@ -160,22 +179,25 @@ async function disconnectEmail() {
   <div class="space-y-6 text-sm">
     <!-- personal-account CTA: members/roles/invitations need an organization -->
     <section v-if="!isOrg" class="rounded-md border border-slate-800 bg-slate-800/40 p-4">
-      <h3 class="mb-1 font-semibold text-white">Invite teammates &amp; manage roles</h3>
+      <h3 class="mb-1 font-semibold text-white">{{ t('layout.accountTeam.org.ctaTitle') }}</h3>
       <p class="mb-3 text-slate-400">
-        Members, roles and invitations live on an organization. Create one to invite teammates and
-        manage their roles — your personal boards stay as they are.
+        {{ t('layout.accountTeam.org.ctaBody') }}
       </p>
       <form class="flex gap-2" @submit.prevent="createOrganization">
-        <UInput v-model="newOrgName" placeholder="Acme Inc." class="flex-1" />
+        <UInput
+          v-model="newOrgName"
+          :placeholder="t('layout.accountTeam.org.namePlaceholder')"
+          class="flex-1"
+        />
         <UButton type="submit" color="primary" :loading="busy" icon="i-lucide-plus">
-          Create organization
+          {{ t('layout.accountTeam.org.create') }}
         </UButton>
       </form>
     </section>
 
     <!-- members -->
     <section v-if="isOrg">
-      <h3 class="mb-2 font-semibold text-white">Members</h3>
+      <h3 class="mb-2 font-semibold text-white">{{ t('layout.accountTeam.members.title') }}</h3>
       <ul class="space-y-1">
         <li
           v-for="m in accounts.members"
@@ -196,13 +218,15 @@ async function disconnectEmail() {
             {{ m.roles.join(', ') }}
           </span>
         </li>
-        <li v-if="accounts.members.length === 0" class="text-slate-500">No members yet.</li>
+        <li v-if="accounts.members.length === 0" class="text-slate-500">
+          {{ t('layout.accountTeam.members.empty') }}
+        </li>
       </ul>
     </section>
 
     <!-- invitations -->
     <section v-if="isOrg">
-      <h3 class="mb-2 font-semibold text-white">Invite a teammate</h3>
+      <h3 class="mb-2 font-semibold text-white">{{ t('layout.accountTeam.invite.title') }}</h3>
       <form class="flex gap-2" @submit.prevent="sendInvite">
         <UInput
           v-model="inviteEmail"
@@ -211,7 +235,9 @@ async function disconnectEmail() {
           class="flex-1"
         />
         <USelect v-model="inviteRoles" multiple :items="ROLE_ITEMS" class="w-44" />
-        <UButton type="submit" color="primary" :loading="busy" icon="i-lucide-send">Invite</UButton>
+        <UButton type="submit" color="primary" :loading="busy" icon="i-lucide-send">
+          {{ t('layout.accountTeam.invite.submit') }}
+        </UButton>
       </form>
 
       <ul v-if="accounts.invitations.length" class="mt-3 space-y-1">
@@ -222,13 +248,16 @@ async function disconnectEmail() {
         >
           <span class="truncate">{{ inv.email }}</span>
           <span class="flex items-center gap-2 text-xs">
-            <span class="uppercase tracking-wide text-slate-400">{{ inv.status }}</span>
+            <span class="uppercase tracking-wide text-slate-400">
+              {{ invitationStatusLabel(inv.status) }}
+            </span>
             <UButton
               v-if="inv.status === 'pending'"
               size="xs"
               color="error"
               variant="ghost"
               icon="i-lucide-x"
+              :aria-label="t('layout.accountTeam.invite.revoke')"
               @click="revoke(inv.id)"
             />
           </span>
@@ -238,48 +267,49 @@ async function disconnectEmail() {
 
     <!-- email sender -->
     <section>
-      <h3 class="mb-2 font-semibold text-white">Email sender</h3>
+      <h3 class="mb-2 font-semibold text-white">{{ t('layout.accountTeam.email.title') }}</h3>
       <p v-if="!accounts.emailConfigured" class="text-slate-500">
-        Email delivery is not enabled on this deployment. Invitations still produce a shareable
-        accept link.
+        {{ t('layout.accountTeam.email.notEnabled') }}
       </p>
       <template v-else>
         <div
           v-if="accounts.emailConnection"
           class="flex items-center justify-between rounded-md bg-slate-800/40 px-2 py-1.5"
         >
-          <span>
-            Connected via <strong>{{ accounts.emailConnection.provider }}</strong> as
-            {{ accounts.emailConnection.fromAddress }}
-          </span>
+          <i18n-t keypath="layout.accountTeam.email.connectedAs" tag="span" scope="global">
+            <template #provider>
+              <strong>{{ accounts.emailConnection.provider }}</strong>
+            </template>
+            <template #from>{{ accounts.emailConnection.fromAddress }}</template>
+          </i18n-t>
           <UButton size="xs" color="error" variant="ghost" :loading="busy" @click="disconnectEmail">
-            Disconnect
+            {{ t('layout.accountTeam.email.disconnect') }}
           </UButton>
         </div>
         <form v-else class="space-y-2" @submit.prevent="connectEmail">
-          <USelect
-            v-model="emailProvider"
-            :items="[
-              { label: 'Resend', value: 'resend' },
-              { label: 'SendGrid', value: 'sendgrid' },
-            ]"
+          <USelect v-model="emailProvider" :items="EMAIL_PROVIDER_ITEMS" class="w-full" />
+          <UInput
+            v-model="emailFrom"
+            type="email"
+            :placeholder="t('layout.accountTeam.email.fromPlaceholder')"
             class="w-full"
           />
-          <UInput v-model="emailFrom" type="email" placeholder="From address" class="w-full" />
           <UInput
             v-model="emailApiKey"
             type="password"
-            placeholder="Provider API key"
+            :placeholder="t('layout.accountTeam.email.apiKeyPlaceholder')"
             class="w-full"
           />
-          <UButton type="submit" color="primary" :loading="busy">Connect email sender</UButton>
+          <UButton type="submit" color="primary" :loading="busy">
+            {{ t('layout.accountTeam.email.connect') }}
+          </UButton>
         </form>
       </template>
     </section>
 
     <!-- account-wide provider API keys (admin-only): direct vendors + proxy gateways -->
     <section v-if="isAdmin" class="space-y-6">
-      <h3 class="mb-2 font-semibold text-white">Account API keys</h3>
+      <h3 class="mb-2 font-semibold text-white">{{ t('layout.accountTeam.apiKeys.title') }}</h3>
       <ProvidersApiKeysSection :account-id="accountId" category="direct" />
       <div class="border-t border-slate-800 pt-6">
         <ProvidersApiKeysSection :account-id="accountId" category="proxy" />

package/app/components/layout/AiProvidersBanner.vue

@@ -6,6 +6,7 @@
 // live on the ui store, so the auto-open watcher and this banner share one source of truth).
 import { computed } from 'vue'
 
+const { t } = useI18n()
 const ui = useUiStore()
 const { ready, hasUsableModel, defaultPresetBroken } = useAiReadiness()
 
@@ -28,20 +29,20 @@ const show = computed(() => showSetup.value || showPreset.value)
           <UIcon name="i-lucide-cpu" class="mt-0.5 h-9 w-9 shrink-0 text-amber-400" />
           <div class="min-w-0 flex-1">
             <div class="flex items-start justify-between gap-3">
-              <h2 class="text-lg font-semibold text-amber-100">No AI model configured</h2>
+              <h2 class="text-lg font-semibold text-amber-100">
+                {{ t('layout.aiProvidersBanner.setup.title') }}
+              </h2>
               <UButton
                 color="neutral"
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-x"
-                aria-label="Dismiss"
+                :aria-label="t('common.close')"
                 @click="ui.dismissAiSetup()"
               />
             </div>
             <p class="mt-1 text-sm text-amber-200/90">
-              Agents need a model to run. AI works out of the box only on a Cloudflare deployment
-              with Workers AI enabled — otherwise connect a provider key, subscription, proxy, or
-              local runner to continue.
+              {{ t('layout.aiProvidersBanner.setup.body') }}
             </p>
             <div class="mt-4">
               <UButton
@@ -50,7 +51,7 @@ const show = computed(() => showSetup.value || showPreset.value)
                 icon="i-lucide-settings"
                 @click="ui.openAiProviderSetup()"
               >
-                Configure AI
+                {{ t('layout.aiProvidersBanner.setup.action') }}
               </UButton>
             </div>
           </div>
@@ -68,20 +69,19 @@ const show = computed(() => showSetup.value || showPreset.value)
           <div class="min-w-0 flex-1">
             <div class="flex items-start justify-between gap-3">
               <h2 class="text-sm font-semibold text-amber-100">
-                Default model preset uses unavailable models
+                {{ t('layout.aiProvidersBanner.preset.title') }}
               </h2>
               <UButton
                 color="neutral"
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-x"
-                aria-label="Dismiss"
+                :aria-label="t('common.close')"
                 @click="ui.dismissAiPresetMismatch()"
               />
             </div>
             <p class="mt-1 text-[13px] text-amber-200/90">
-              Tasks using the default preset would fail. Edit the preset or configure the missing
-              provider.
+              {{ t('layout.aiProvidersBanner.preset.body') }}
             </p>
             <div class="mt-3">
               <UButton
@@ -91,7 +91,7 @@ const show = computed(() => showSetup.value || showPreset.value)
                 icon="i-lucide-cpu"
                 @click="ui.openAiPresetMismatch()"
               >
-                Review preset
+                {{ t('layout.aiProvidersBanner.preset.action') }}
               </UButton>
             </div>
           </div>

package/app/components/layout/BoardSwitcher.vue

@@ -6,6 +6,8 @@ import type { CloudProvider } from '~/types/domain'
 // active board within it, and manages boards (new / rename / delete). The account
 // row is shown only when accounts exist (auth on); in dev it falls back to a plain
 // board switcher over the single unscoped context.
+const { t } = useI18n()
+
 const accounts = useAccountsStore()
 const workspace = useWorkspaceStore()
 const ui = useUiStore()
@@ -23,15 +25,17 @@ function notifyError(title: string, e: unknown) {
 }
 
 // The cloud provider new services in the active account default to (a service may
-// override it per-frame). `docker` is the local Docker/Podman backend.
-const PROVIDERS: { value: CloudProvider; label: string }[] = [
+// override it per-frame). `docker` is the local Docker/Podman backend. The brand
+// names (Cloudflare/AWS/GCP/Azure) are proper nouns kept verbatim; only the
+// `docker`/`custom` labels carry prose, so those are translated.
+const PROVIDERS = computed<{ value: CloudProvider; label: string }[]>(() => [
   { value: 'cloudflare', label: 'Cloudflare' },
-  { value: 'docker', label: 'Docker (local)' },
+  { value: 'docker', label: t('layout.boardSwitcher.providers.docker') },
   { value: 'aws', label: 'AWS' },
   { value: 'gcp', label: 'GCP' },
   { value: 'azure', label: 'Azure' },
-  { value: 'custom', label: 'Custom' },
-]
+  { value: 'custom', label: t('layout.boardSwitcher.providers.custom') },
+])
 
 async function setDefaultProvider(provider: CloudProvider) {
   const id = accounts.activeAccountId
@@ -39,7 +43,7 @@ async function setDefaultProvider(provider: CloudProvider) {
   try {
     await accounts.setDefaultCloudProvider(id, provider)
   } catch (e) {
-    notifyError('Could not update default provider', e)
+    notifyError(t('layout.boardSwitcher.toast.updateProviderFailed'), e)
   }
 }
 
@@ -52,12 +56,16 @@ const accountItems = computed<DropdownMenuItem[][]>(() => [
     onSelect: () => void selectAccount(a.id),
   })),
   [
-    { label: 'New organization…', icon: 'i-lucide-plus', onSelect: () => openPrompt('account') },
+    {
+      label: t('layout.boardSwitcher.account.newOrg'),
+      icon: 'i-lucide-plus',
+      onSelect: () => openPrompt('account'),
+    },
     // Account settings: the unified per-account panel (team + roles + invitations + email
     // sender + account-tier fragment library). The panel itself handles personal accounts
     // (prompting to create an org for the team tab), so this is not gated.
     {
-      label: 'Account settings…',
+      label: t('layout.boardSwitcher.account.settings'),
       icon: 'i-lucide-settings',
       onSelect: () => ui.openAccountSettings(),
     },
@@ -65,9 +73,9 @@ const accountItems = computed<DropdownMenuItem[][]>(() => [
     ...(accounts.activeAccount?.roles?.includes('admin')
       ? [
           {
-            label: 'Default cloud provider',
+            label: t('layout.boardSwitcher.account.defaultProvider'),
             icon: 'i-lucide-cloud',
-            children: PROVIDERS.map((p) => ({
+            children: PROVIDERS.value.map((p) => ({
               label: p.label,
               trailingIcon:
                 (accounts.activeAccount?.defaultCloudProvider ?? 'cloudflare') === p.value
@@ -89,10 +97,18 @@ const boardItems = computed<DropdownMenuItem[][]>(() => [
     onSelect: () => void switchBoard(w.id),
   })),
   [
-    { label: 'New board…', icon: 'i-lucide-plus', onSelect: () => openPrompt('board') },
-    { label: 'Rename board…', icon: 'i-lucide-pencil', onSelect: () => openPrompt('rename') },
     {
-      label: 'Delete board',
+      label: t('layout.boardSwitcher.board.new'),
+      icon: 'i-lucide-plus',
+      onSelect: () => openPrompt('board'),
+    },
+    {
+      label: t('layout.boardSwitcher.board.rename'),
+      icon: 'i-lucide-pencil',
+      onSelect: () => openPrompt('rename'),
+    },
+    {
+      label: t('layout.boardSwitcher.board.delete'),
       icon: 'i-lucide-trash-2',
       color: 'error' as const,
       onSelect: () => void removeBoard(),
@@ -106,7 +122,7 @@ async function selectAccount(id: string) {
   try {
     await workspace.selectAccount(id)
   } catch (e) {
-    notifyError('Could not switch account', e)
+    notifyError(t('layout.boardSwitcher.toast.switchAccountFailed'), e)
   } finally {
     busy.value = false
   }
@@ -117,7 +133,7 @@ async function switchBoard(id: string) {
   try {
     await workspace.switchTo(id)
   } catch (e) {
-    notifyError('Could not open board', e)
+    notifyError(t('layout.boardSwitcher.toast.openBoardFailed'), e)
   } finally {
     busy.value = false
   }
@@ -129,9 +145,9 @@ async function removeBoard() {
   busy.value = true
   try {
     await workspace.remove(id)
-    toast.add({ title: 'Board deleted', icon: 'i-lucide-check' })
+    toast.add({ title: t('layout.boardSwitcher.toast.boardDeleted'), icon: 'i-lucide-check' })
   } catch (e) {
-    notifyError('Could not delete board', e)
+    notifyError(t('layout.boardSwitcher.toast.deleteBoardFailed'), e)
   } finally {
     busy.value = false
   }
@@ -149,11 +165,25 @@ const promptOpen = computed({
     if (!v) prompt.value = null
   },
 })
-const promptMeta: Record<PromptKind, { title: string; placeholder: string; cta: string }> = {
-  account: { title: 'New organization', placeholder: 'Acme Inc.', cta: 'Create' },
-  board: { title: 'New board', placeholder: 'Untitled board', cta: 'Create' },
-  rename: { title: 'Board settings', placeholder: 'Board name', cta: 'Save' },
-}
+const promptMeta = computed<
+  Record<PromptKind, { title: string; placeholder: string; cta: string }>
+>(() => ({
+  account: {
+    title: t('layout.boardSwitcher.prompt.account.title'),
+    placeholder: t('layout.boardSwitcher.prompt.account.placeholder'),
+    cta: t('layout.boardSwitcher.prompt.create'),
+  },
+  board: {
+    title: t('layout.boardSwitcher.prompt.board.title'),
+    placeholder: t('layout.boardSwitcher.prompt.board.placeholder'),
+    cta: t('layout.boardSwitcher.prompt.create'),
+  },
+  rename: {
+    title: t('layout.boardSwitcher.prompt.rename.title'),
+    placeholder: t('layout.boardSwitcher.prompt.rename.placeholder'),
+    cta: t('common.save'),
+  },
+}))
 /** Whether the current prompt edits a board (so it shows the description field). */
 const promptHasDescription = computed(() => prompt.value === 'board' || prompt.value === 'rename')
 
@@ -184,7 +214,7 @@ async function submitPrompt() {
     }
     prompt.value = null
   } catch (e) {
-    notifyError('Action failed', e)
+    notifyError(t('common.actionFailed'), e)
   } finally {
     busy.value = false
   }
@@ -210,7 +240,7 @@ async function submitPrompt() {
           class="h-3.5 w-3.5 shrink-0 text-slate-400"
         />
         <span class="truncate text-[11px] font-medium uppercase tracking-wide text-slate-400">
-          {{ accounts.activeAccount?.name ?? 'Account' }}
+          {{ accounts.activeAccount?.name ?? t('layout.boardSwitcher.accountFallback') }}
         </span>
         <UIcon
           name="i-lucide-chevrons-up-down"
@@ -228,7 +258,7 @@ async function submitPrompt() {
       >
         <UIcon name="i-lucide-layout-dashboard" class="h-4 w-4 shrink-0 text-indigo-400" />
         <span class="truncate text-sm font-medium text-white">
-          {{ workspace.activeWorkspace?.name ?? 'Board' }}
+          {{ workspace.activeWorkspace?.name ?? t('layout.boardSwitcher.boardFallback') }}
         </span>
         <UIcon name="i-lucide-chevron-down" class="ml-auto h-4 w-4 shrink-0 text-slate-500" />
       </button>
@@ -238,7 +268,7 @@ async function submitPrompt() {
     <UModal v-model:open="promptOpen" :title="prompt ? promptMeta[prompt].title : ''">
       <template #body>
         <form class="space-y-3" @submit.prevent="submitPrompt">
-          <UFormField label="Name">
+          <UFormField :label="t('layout.boardSwitcher.prompt.nameLabel')">
             <UInput
               v-model="promptValue"
               autofocus
@@ -246,17 +276,21 @@ async function submitPrompt() {
               class="w-full"
             />
           </UFormField>
-          <UFormField v-if="promptHasDescription" label="Description" hint="Optional">
+          <UFormField
+            v-if="promptHasDescription"
+            :label="t('layout.boardSwitcher.prompt.descriptionLabel')"
+            :hint="t('layout.boardSwitcher.prompt.descriptionHint')"
+          >
             <UTextarea
               v-model="promptDescription"
               :rows="3"
-              placeholder="What is this board for?"
+              :placeholder="t('layout.boardSwitcher.prompt.descriptionPlaceholder')"
               class="w-full"
             />
           </UFormField>
           <div class="flex justify-end gap-2">
             <UButton color="neutral" variant="ghost" :disabled="busy" @click="prompt = null">
-              Cancel
+              {{ t('common.cancel') }}
             </UButton>
             <UButton type="submit" color="primary" :loading="busy">
               {{ prompt ? promptMeta[prompt].cta : '' }}