@byline/admin 2.5.2 → 2.6.0

package/src/modules/admin-account/components/update.tsx

@@ -22,9 +22,10 @@
  * `admin.users.versionConflict` and we prompt for reload.
  */
 
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { revalidateLogic, useForm } from '@tanstack/react-form-start'
 
+import { useTranslation } from '@byline/i18n/react'
 import { Alert, Button, Input, LoaderEllipsis } from '@byline/ui/react'
 import cx from 'classnames'
 import { z } from 'zod'
@@ -33,17 +34,18 @@ import { useBylineAdminServices } from '../../../services/admin-services-context
 import styles from './update.module.css'
 import type { AccountResponse } from '../index.js'
 
-const updateAccountSchema = z.object({
-  given_name: z.string().max(100, 'Given name must not exceed 100 characters'),
-  family_name: z.string().max(100, 'Family name must not exceed 100 characters'),
-  username: z.string().max(100, 'Username must not exceed 100 characters'),
-  email: z
-    .email({ message: 'Enter a valid email address' })
-    .min(3)
-    .max(254, 'Email must not exceed 254 characters'),
-})
+// Field-length ceilings sourced from the `adminUsers` schema in @byline/admin
+// (100/100/100/254). Kept as constants so error messages can ICU-format them.
+const MAX_NAME = 100
+const MAX_USERNAME = 100
+const MAX_EMAIL = 254
 
-type UpdateAccountValues = z.infer<typeof updateAccountSchema>
+type UpdateAccountValues = {
+  given_name: string
+  family_name: string
+  username: string
+  email: string
+}
 
 function defaultsFrom(account: AccountResponse): UpdateAccountValues {
   return {
@@ -80,9 +82,34 @@ interface UpdateAccountProps {
 
 export function UpdateAccount({ account, onClose, onSuccess }: UpdateAccountProps) {
   const { updateAccount } = useBylineAdminServices()
+  const { t } = useTranslation('byline-admin')
   const [formError, setFormError] = useState<string | null>(null)
   const [successMessage, setSuccessMessage] = useState<string | null>(null)
 
+  // Schema is rebuilt per-render so error messages reflect the active
+  // locale. Cheap — small schema, no ahead-of-time compilation cost
+  // that matters at this scale. `useMemo` keeps Tanstack Form's
+  // validator-identity stable across re-renders.
+  const updateAccountSchema = useMemo(
+    () =>
+      z.object({
+        given_name: z
+          .string()
+          .max(MAX_NAME, t('account.update.errors.givenNameTooLong', { max: MAX_NAME })),
+        family_name: z
+          .string()
+          .max(MAX_NAME, t('account.update.errors.familyNameTooLong', { max: MAX_NAME })),
+        username: z
+          .string()
+          .max(MAX_USERNAME, t('account.update.errors.usernameTooLong', { max: MAX_USERNAME })),
+        email: z
+          .email({ message: t('account.update.errors.invalidEmail') })
+          .min(3)
+          .max(MAX_EMAIL, t('account.update.errors.emailTooLong', { max: MAX_EMAIL })),
+      }),
+    [t]
+  )
+
   const form = useForm({
     defaultValues: defaultsFrom(account),
     validationLogic: revalidateLogic({
@@ -97,34 +124,33 @@ export function UpdateAccount({ account, onClose, onSuccess }: UpdateAccountProp
       setSuccessMessage(null)
       const patch = buildPatch(value, account)
       if (Object.keys(patch).length === 0) {
-        setSuccessMessage('No changes to save.')
+        setSuccessMessage(t('common.feedback.noChanges'))
         return
       }
       try {
         const updated = await updateAccount({ data: { vid: account.vid, patch } })
-        setSuccessMessage('Saved.')
+        setSuccessMessage(t('common.feedback.saved'))
         onSuccess?.(updated)
       } catch (err) {
         const code = getErrorCode(err)
         if (code === 'admin.users.emailInUse') {
+          const message = t('account.update.errors.emailInUse')
           form.setFieldMeta('email', (meta) => ({
             ...meta,
-            errorMap: { ...meta.errorMap, onServer: 'This email is already in use.' },
-            errors: ['This email is already in use.'],
+            errorMap: { ...meta.errorMap, onServer: message },
+            errors: [message],
           }))
           return
         }
         if (code === 'admin.users.versionConflict') {
-          setFormError(
-            'Your account has been modified elsewhere since you opened this form. Reload to refresh and try again.'
-          )
+          setFormError(t('common.errors.versionConflict'))
           return
         }
         if (code === 'admin.account.notFound') {
-          setFormError('Your admin account could not be found. Please sign in again.')
+          setFormError(t('common.errors.accountNotFound'))
           return
         }
-        setFormError('Could not save changes. Please try again.')
+        setFormError(t('common.errors.couldNotSave'))
       }
     },
   })
@@ -146,7 +172,7 @@ export function UpdateAccount({ account, onClose, onSuccess }: UpdateAccountProp
         <form.Field name="given_name">
           {(field) => (
             <Input
-              label="Given name"
+              label={t('account.update.fields.givenName')}
               id="given_name"
               name={field.name}
               value={field.state.value}
@@ -162,7 +188,7 @@ export function UpdateAccount({ account, onClose, onSuccess }: UpdateAccountProp
         <form.Field name="family_name">
           {(field) => (
             <Input
-              label="Family name"
+              label={t('account.update.fields.familyName')}
               id="family_name"
               name={field.name}
               value={field.state.value}
@@ -178,7 +204,7 @@ export function UpdateAccount({ account, onClose, onSuccess }: UpdateAccountProp
         <form.Field name="username">
           {(field) => (
             <Input
-              label="Username"
+              label={t('account.update.fields.username')}
               id="username"
               name={field.name}
               value={field.state.value}
@@ -186,7 +212,7 @@ export function UpdateAccount({ account, onClose, onSuccess }: UpdateAccountProp
               onChange={(e) => field.handleChange(e.currentTarget.value)}
               error={field.state.meta.errors.length > 0}
               errorText={firstError(field.state.meta.errors)}
-              helpText="Optional. Leave blank to clear."
+              helpText={t('account.update.fields.usernameHelp')}
               autoComplete="username"
             />
           )}
@@ -195,7 +221,7 @@ export function UpdateAccount({ account, onClose, onSuccess }: UpdateAccountProp
         <form.Field name="email">
           {(field) => (
             <Input
-              label="Email"
+              label={t('common.fields.email')}
               id="email"
               name={field.name}
               type="email"
@@ -218,7 +244,7 @@ export function UpdateAccount({ account, onClose, onSuccess }: UpdateAccountProp
             onClick={onClose}
             className={cx('byline-account-update-action', styles.action)}
           >
-            {successMessage ? 'Close' : 'Cancel'}
+            {successMessage ? t('common.actions.close') : t('common.actions.cancel')}
           </Button>
           <form.Subscribe
             selector={(state) => ({
@@ -235,7 +261,7 @@ export function UpdateAccount({ account, onClose, onSuccess }: UpdateAccountProp
                 disabled={!canSubmit || isSubmitting}
                 className={cx('byline-account-update-action', styles.action)}
               >
-                {isSubmitting === true ? <LoaderEllipsis size={42} /> : 'Save'}
+                {isSubmitting === true ? <LoaderEllipsis size={42} /> : t('common.actions.save')}
               </Button>
             )}
           </form.Subscribe>

package/src/modules/admin-account/index.ts

@@ -33,6 +33,7 @@
 export {
   changeAccountPasswordCommand,
   getAccountCommand,
+  setPreferredLocaleCommand,
   updateAccountCommand,
 } from './commands.js'
 export {
@@ -47,6 +48,7 @@ export {
   changeAccountPasswordRequestSchema,
   getAccountRequestSchema,
   okResponseSchema,
+  setPreferredLocaleRequestSchema,
   updateAccountRequestSchema,
 } from './schemas.js'
 export { AdminAccountService } from './service.js'
@@ -56,5 +58,6 @@ export type {
   ChangeAccountPasswordRequest,
   GetAccountRequest,
   OkResponse,
+  SetPreferredLocaleRequest,
   UpdateAccountRequest,
 } from './schemas.js'

package/src/modules/admin-account/schemas.ts

@@ -76,6 +76,19 @@ export const changeAccountPasswordRequestSchema = z.object({
 })
 export type ChangeAccountPasswordRequest = z.infer<typeof changeAccountPasswordRequestSchema>
 
+// Vid-less — admin interface locale is a personal preference, not content
+// state, so the menu can persist without a fresh-vid round trip. `null`
+// clears the column and lets detection take over.
+export const setPreferredLocaleRequestSchema = z.object({
+  locale: z
+    .string()
+    .min(2)
+    .max(16)
+    .regex(/^[a-zA-Z]{2,3}(-[a-zA-Z0-9]{2,8})*$/, 'must be a BCP 47 locale tag')
+    .nullable(),
+})
+export type SetPreferredLocaleRequest = z.infer<typeof setPreferredLocaleRequestSchema>
+
 // ---------------------------------------------------------------------------
 // Responses (re-exports — same shape as the admin-users module)
 // ---------------------------------------------------------------------------

package/src/modules/admin-account/service.ts

@@ -71,6 +71,18 @@ export class AdminAccountService {
     return toAdminUser(row)
   }
 
+  async setPreferredLocale(actorId: string, locale: string | null): Promise<AccountResponse> {
+    const current = await this.#repo.getById(actorId)
+    if (!current) throw ERR_ADMIN_ACCOUNT_NOT_FOUND()
+    await this.#repo.setPreferredLocale(actorId, locale)
+    // Re-read for the post-write vid + updated_at — the vid-less repo
+    // method bumps `vid`, so the response carries the fresh shape callers
+    // need for any subsequent vid-gated edit.
+    const updated = await this.#repo.getById(actorId)
+    if (!updated) throw ERR_ADMIN_ACCOUNT_NOT_FOUND()
+    return toAdminUser(updated)
+  }
+
   async changePassword(
     actorId: string,
     request: ChangeAccountPasswordRequest

package/src/modules/admin-permissions/components/inspector.tsx

@@ -28,6 +28,7 @@
 
 import { useState } from 'react'
 
+import { useTranslation } from '@byline/i18n/react'
 import { Button, Container, LoaderRing, Section } from '@byline/ui/react'
 import cx from 'classnames'
 
@@ -82,15 +83,16 @@ function displayUser(user: WhoHasAbilityResponse['users'][number]): string {
 // --- expandable matrix row ------------------------------------------------
 
 function MatrixPanel({ matrix }: { matrix: WhoHasAbilityResponse }) {
+  const { t } = useTranslation('byline-admin')
   return (
     <div className={cx('byline-inspector-matrix', styles.matrix)}>
       <div>
         <h4 className={cx('byline-inspector-matrix-title', styles['matrix-title'])}>
-          Roles ({matrix.roles.length})
+          {t('adminPermissions.matrix.rolesTitle', { count: matrix.roles.length })}
         </h4>
         {matrix.roles.length === 0 ? (
           <p className={cx('muted', 'byline-inspector-matrix-empty', styles['matrix-empty'])}>
-            No role grants this ability.
+            {t('adminPermissions.matrix.rolesEmpty')}
           </p>
         ) : (
           <ul className={cx('byline-inspector-matrix-list', styles['matrix-list'])}>
@@ -110,11 +112,11 @@ function MatrixPanel({ matrix }: { matrix: WhoHasAbilityResponse }) {
       </div>
       <div>
         <h4 className={cx('byline-inspector-matrix-title', styles['matrix-title'])}>
-          Admin users ({matrix.users.length})
+          {t('adminPermissions.matrix.usersTitle', { count: matrix.users.length })}
         </h4>
         {matrix.users.length === 0 ? (
           <p className={cx('muted', 'byline-inspector-matrix-empty', styles['matrix-empty'])}>
-            No admin user holds this ability.
+            {t('adminPermissions.matrix.usersEmpty')}
           </p>
         ) : (
           <ul className={cx('byline-inspector-matrix-list', styles['matrix-list'])}>
@@ -142,7 +144,9 @@ interface AbilityRowProps {
 }
 
 function AbilityRow({ ability, matrix, loading, onToggle, expanded }: AbilityRowProps) {
+  const { t } = useTranslation('byline-admin')
   const sv = sourceVariant(ability.source)
+  const sourceKey = ability.source ?? 'unknown'
   return (
     <div className={cx('byline-inspector-row', styles.row)}>
       <div className={cx('byline-inspector-row-head', styles['row-head'])}>
@@ -157,7 +161,7 @@ function AbilityRow({ ability, matrix, loading, onToggle, expanded }: AbilityRow
                 sv.local
               )}
             >
-              {ability.source ?? 'unknown'}
+              {t(`adminPermissions.source.${sourceKey}`)}
             </span>
           </div>
           <p className={cx('byline-inspector-row-label', styles['row-label'])}>{ability.label}</p>
@@ -170,14 +174,16 @@ function AbilityRow({ ability, matrix, loading, onToggle, expanded }: AbilityRow
           ) : null}
         </div>
         <Button size="xs" intent="secondary" onClick={onToggle}>
-          {expanded ? 'Hide' : 'Holders'}
+          {expanded
+            ? t('adminPermissions.row.hideButton')
+            : t('adminPermissions.row.holdersButton')}
         </Button>
       </div>
       {expanded ? (
         loading ? (
           <div className={cx('byline-inspector-loader', styles.loader)}>
             <LoaderRing size={20} color="#888" />
-            <span className="muted">Loading…</span>
+            <span className="muted">{t('common.loading')}</span>
           </div>
         ) : matrix ? (
           <MatrixPanel matrix={matrix} />
@@ -198,6 +204,7 @@ interface GroupSectionProps {
 }
 
 function GroupSection({ group, matrices, loading, expanded, onToggle }: GroupSectionProps) {
+  const { t } = useTranslation('byline-admin')
   return (
     <details open className={cx('byline-inspector-group', styles.group)}>
       <summary className={cx('byline-inspector-group-summary', styles['group-summary'])}>
@@ -205,7 +212,7 @@ function GroupSection({ group, matrices, loading, expanded, onToggle }: GroupSec
           {group.group}
         </span>
         <span className={cx('muted', 'byline-inspector-group-count', styles['group-count'])}>
-          {group.abilities.length} abilities
+          {t('adminPermissions.group.abilitiesCount', { count: group.abilities.length })}
         </span>
       </summary>
       <div className={cx('byline-inspector-group-body', styles['group-body'])}>
@@ -228,6 +235,7 @@ function GroupSection({ group, matrices, loading, expanded, onToggle }: GroupSec
 
 export function AbilitiesInspector({ data }: { data: ListRegisteredAbilitiesResponse }) {
   const { whoHasAbility } = useBylineAdminServices()
+  const { t } = useTranslation('byline-admin')
   const [expanded, setExpanded] = useState<Set<string>>(new Set())
   const [loading, setLoading] = useState<Set<string>>(new Set())
   const [matrices, setMatrices] = useState<Record<string, WhoHasAbilityResponse>>({})
@@ -264,19 +272,19 @@ export function AbilitiesInspector({ data }: { data: ListRegisteredAbilitiesResp
     <Section>
       <Container>
         <div className={cx('byline-inspector-head', styles.head)}>
-          <h1 className={cx('byline-inspector-title', styles.title)}>Abilities Inspector</h1>
+          <h1 className={cx('byline-inspector-title', styles.title)}>
+            {t('adminPermissions.title')}
+          </h1>
           <span className={cx('byline-inspector-count-pill', styles['count-pill'])}>
-            {data.total} registered
+            {t('adminPermissions.countPill', { count: data.total })}
           </span>
         </div>
         <p className={cx('muted', 'byline-inspector-lead', styles.lead)}>
-          Read-only view of every ability registered through <code>bylineCore.abilities</code>.
-          Collections auto-register CRUD + workflow abilities; admin subsystems contribute their own
-          keys at composition root via <code>registerAdminAbilities</code>.
+          {t('adminPermissions.lead')}
         </p>
         {data.groups.length === 0 ? (
           <p className={cx('muted', 'byline-inspector-empty', styles.empty)}>
-            No abilities are registered.
+            {t('adminPermissions.empty')}
           </p>
         ) : (
           <div className={cx('byline-inspector-groups', styles.groups)}>

package/src/modules/admin-roles/components/create.tsx

@@ -17,9 +17,10 @@
  * (see the repository contract).
  */
 
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { revalidateLogic, useForm } from '@tanstack/react-form-start'
 
+import { useTranslation } from '@byline/i18n/react'
 import { Alert, Button, Input, LoaderEllipsis, TextArea } from '@byline/ui/react'
 import cx from 'classnames'
 import { z } from 'zod'
@@ -28,19 +29,15 @@ import { useBylineAdminServices } from '../../../services/admin-services-context
 import styles from './create.module.css'
 import type { AdminRoleResponse } from '../index.js'
 
-const createAdminRoleFormSchema = z.object({
-  name: z.string().min(1, 'Name is required').max(128, 'Name must not exceed 128 characters'),
-  machine_name: z
-    .string()
-    .min(1, 'Machine name is required')
-    .max(128, 'Machine name must not exceed 128 characters')
-    .regex(/^[a-z0-9][a-z0-9_-]*$/, {
-      message: 'Lowercase letters, numbers, hyphens, and underscores only',
-    }),
-  description: z.string().max(2000, 'Description must not exceed 2000 characters'),
-})
+const MAX_NAME = 128
+const MAX_MACHINE_NAME = 128
+const MAX_DESCRIPTION = 2000
 
-type CreateAdminRoleValues = z.infer<typeof createAdminRoleFormSchema>
+type CreateAdminRoleValues = {
+  name: string
+  machine_name: string
+  description: string
+}
 
 const initialValues: CreateAdminRoleValues = {
   name: '',
@@ -59,8 +56,38 @@ interface CreateAdminRoleProps {
 
 export function CreateAdminRole({ onClose, onSuccess }: CreateAdminRoleProps) {
   const { createAdminRole } = useBylineAdminServices()
+  const { t } = useTranslation('byline-admin')
   const [formError, setFormError] = useState<string | null>(null)
 
+  // Schema rebuilt per-render so error messages reflect the active
+  // locale; wrapped in useMemo([t]) to keep validator identity stable.
+  const createAdminRoleFormSchema = useMemo(
+    () =>
+      z.object({
+        name: z
+          .string()
+          .min(1, t('adminRoles.create.errors.nameRequired'))
+          .max(MAX_NAME, t('adminRoles.create.errors.nameTooLong', { max: MAX_NAME })),
+        machine_name: z
+          .string()
+          .min(1, t('adminRoles.create.errors.machineNameRequired'))
+          .max(
+            MAX_MACHINE_NAME,
+            t('adminRoles.create.errors.machineNameTooLong', { max: MAX_MACHINE_NAME })
+          )
+          .regex(/^[a-z0-9][a-z0-9_-]*$/, {
+            message: t('adminRoles.create.errors.machineNameInvalid'),
+          }),
+        description: z
+          .string()
+          .max(
+            MAX_DESCRIPTION,
+            t('adminRoles.create.errors.descriptionTooLong', { max: MAX_DESCRIPTION })
+          ),
+      }),
+    [t]
+  )
+
   const form = useForm({
     defaultValues: initialValues,
     validationLogic: revalidateLogic({
@@ -85,14 +112,15 @@ export function CreateAdminRole({ onClose, onSuccess }: CreateAdminRoleProps) {
       } catch (err) {
         const code = getErrorCode(err)
         if (code === 'admin.roles.machineNameInUse') {
+          const message = t('adminRoles.create.errors.machineNameInUse')
           form.setFieldMeta('machine_name', (meta) => ({
             ...meta,
-            errorMap: { ...meta.errorMap, onServer: 'This machine name is already in use.' },
-            errors: ['This machine name is already in use.'],
+            errorMap: { ...meta.errorMap, onServer: message },
+            errors: [message],
           }))
           return
         }
-        setFormError('Could not create this admin role. Please try again.')
+        setFormError(t('adminRoles.create.errors.fallback'))
       }
     },
   })
@@ -113,7 +141,7 @@ export function CreateAdminRole({ onClose, onSuccess }: CreateAdminRoleProps) {
         <form.Field name="name">
           {(field) => (
             <Input
-              label="Name"
+              label={t('adminRoles.fields.name')}
               id="new-role-name"
               name={field.name}
               value={field.state.value}
@@ -121,7 +149,7 @@ export function CreateAdminRole({ onClose, onSuccess }: CreateAdminRoleProps) {
               onChange={(e) => field.handleChange(e.currentTarget.value)}
               error={field.state.meta.errors.length > 0}
               errorText={firstError(field.state.meta.errors)}
-              helpText="Human-readable label, e.g. 'Editor'."
+              helpText={t('adminRoles.create.fields.nameHelp')}
               required
             />
           )}
@@ -130,7 +158,7 @@ export function CreateAdminRole({ onClose, onSuccess }: CreateAdminRoleProps) {
         <form.Field name="machine_name">
           {(field) => (
             <Input
-              label="Machine name"
+              label={t('adminRoles.fields.machineName')}
               id="new-role-machine-name"
               name={field.name}
               value={field.state.value}
@@ -138,7 +166,7 @@ export function CreateAdminRole({ onClose, onSuccess }: CreateAdminRoleProps) {
               onChange={(e) => field.handleChange(e.currentTarget.value)}
               error={field.state.meta.errors.length > 0}
               errorText={firstError(field.state.meta.errors)}
-              helpText="Stable code-side handle, e.g. 'editor'. Cannot be changed later."
+              helpText={t('adminRoles.create.fields.machineNameHelp')}
               required
             />
           )}
@@ -147,7 +175,7 @@ export function CreateAdminRole({ onClose, onSuccess }: CreateAdminRoleProps) {
         <form.Field name="description">
           {(field) => (
             <TextArea
-              label="Description"
+              label={t('adminRoles.fields.description')}
               id="new-role-description"
               name={field.name}
               value={field.state.value}
@@ -168,7 +196,7 @@ export function CreateAdminRole({ onClose, onSuccess }: CreateAdminRoleProps) {
             onClick={onClose}
             className={cx('byline-role-create-action', styles.action)}
           >
-            Cancel
+            {t('common.actions.cancel')}
           </Button>
           <form.Subscribe
             selector={(state) => ({
@@ -184,7 +212,7 @@ export function CreateAdminRole({ onClose, onSuccess }: CreateAdminRoleProps) {
                 disabled={!canSubmit || isSubmitting}
                 className={cx('byline-role-create-action', styles.action)}
               >
-                {isSubmitting === true ? <LoaderEllipsis size={42} /> : 'Save'}
+                {isSubmitting === true ? <LoaderEllipsis size={42} /> : t('common.actions.save')}
               </Button>
             )}
           </form.Subscribe>

package/src/modules/admin-roles/components/permissions.tsx

@@ -31,6 +31,7 @@
 
 import { useMemo, useState } from 'react'
 
+import { useTranslation } from '@byline/i18n/react'
 import { Alert, Button, Checkbox, LoaderEllipsis } from '@byline/ui/react'
 import cx from 'classnames'
 
@@ -78,6 +79,7 @@ function GroupSection({
   onSelectAll,
   onClearAll,
 }: GroupSectionProps) {
+  const { t } = useTranslation('byline-admin')
   const groupKeys = useMemo(() => group.abilities.map((a) => a.key), [group.abilities])
   const selectedInGroup = groupKeys.filter((key) => selected.has(key)).length
   const isEdit = mode === 'edit'
@@ -92,7 +94,11 @@ function GroupSection({
           <span
             className={cx('muted', 'byline-role-permissions-group-count', styles['group-count'])}
           >
-            {selectedInGroup} of {group.abilities.length} {isEdit ? 'selected' : 'granted'}
+            {t('adminRoles.permissions.groupCount', {
+              selected: selectedInGroup,
+              total: group.abilities.length,
+              mode,
+            })}
           </span>
         </div>
         {isEdit ? (
@@ -104,7 +110,7 @@ function GroupSection({
               disabled={saving || selectedInGroup === group.abilities.length}
               onClick={() => onSelectAll(groupKeys)}
             >
-              Select all
+              {t('adminRoles.permissions.selectAll')}
             </Button>
             <Button
               size="xs"
@@ -113,7 +119,7 @@ function GroupSection({
               disabled={saving || selectedInGroup === 0}
               onClick={() => onClearAll(groupKeys)}
             >
-              Clear
+              {t('adminRoles.permissions.clear')}
             </Button>
           </div>
         ) : null}
@@ -175,6 +181,7 @@ export function RolePermissions({
   onSaved,
 }: RolePermissionsProps) {
   const { setRoleAbilities } = useBylineAdminServices()
+  const { t } = useTranslation('byline-admin')
   const [mode, setMode] = useState<Mode>('view')
   const [initialSet, setInitialSet] = useState<ReadonlySet<string>>(() => new Set(initialAbilities))
   const [selected, setSelected] = useState<Set<string>>(() => new Set(initialAbilities))
@@ -246,13 +253,11 @@ export function RolePermissions({
     } catch (err) {
       const code = getErrorCode(err)
       if (code === 'admin.permissions.roleNotFound') {
-        setError('This role no longer exists.')
+        setError(t('adminRoles.permissions.errors.roleNotFound'))
       } else if (code === 'admin.permissions.abilityUnregistered') {
-        setError(
-          'One or more selected abilities are no longer registered. Reload the page and try again.'
-        )
+        setError(t('adminRoles.permissions.errors.abilityUnregistered'))
       } else {
-        setError('Could not save permissions. Please try again.')
+        setError(t('adminRoles.permissions.errors.fallback'))
       }
     } finally {
       setSaving(false)
@@ -272,14 +277,12 @@ export function RolePermissions({
           onEdit={handleEnterEdit}
         />
         <p className={cx('muted', 'byline-role-permissions-counter', styles.counter)}>
-          <span className={cx('byline-role-permissions-counter-num', styles['counter-num'])}>
-            {totalSelected}
-          </span>{' '}
-          of{' '}
-          <span className={cx('byline-role-permissions-counter-num', styles['counter-num'])}>
-            {registered.total}
-          </span>{' '}
-          {isEdit ? 'selected' : 'granted'} for {role.name}
+          {t('adminRoles.permissions.counter', {
+            selected: totalSelected,
+            total: registered.total,
+            mode,
+            role: role.name,
+          })}
         </p>
         {isEdit && isDirty ? (
           <div className={cx('byline-role-permissions-actions', styles.actions)}>
@@ -291,7 +294,7 @@ export function RolePermissions({
               disabled={saving}
               className={cx('byline-role-permissions-action', styles.action)}
             >
-              Cancel
+              {t('common.actions.cancel')}
             </Button>
             <Button
               type="button"
@@ -301,7 +304,7 @@ export function RolePermissions({
               disabled={saving}
               className={cx('byline-role-permissions-action', styles.action)}
             >
-              {saving ? <LoaderEllipsis size={30} /> : 'Save'}
+              {saving ? <LoaderEllipsis size={30} /> : t('common.actions.save')}
             </Button>
           </div>
         ) : null}
@@ -336,6 +339,7 @@ interface ModeToggleProps {
 }
 
 function ModeToggle({ mode, dirty, saving, onView, onEdit }: ModeToggleProps) {
+  const { t } = useTranslation('byline-admin')
   // Segmented two-state toggle. View is disabled while dirty so the
   // user has to commit to Save or Cancel — avoids accidentally
   // discarding a draft selection.
@@ -346,7 +350,7 @@ function ModeToggle({ mode, dirty, saving, onView, onEdit }: ModeToggleProps) {
   return (
     <div
       role="group"
-      aria-label="Permissions mode"
+      aria-label={t('adminRoles.permissions.modeAriaLabel')}
       className={cx('byline-role-permissions-mode-toggle', styles['mode-toggle'])}
     >
       <button
@@ -364,7 +368,7 @@ function ModeToggle({ mode, dirty, saving, onView, onEdit }: ModeToggleProps) {
             ]
         )}
       >
-        View
+        {t('adminRoles.permissions.viewMode')}
       </button>
       <button
         type="button"
@@ -383,7 +387,7 @@ function ModeToggle({ mode, dirty, saving, onView, onEdit }: ModeToggleProps) {
             ]
         )}
       >
-        Edit
+        {t('adminRoles.permissions.editMode')}
       </button>
     </div>
   )