From 484474e2c9c060573db286aa830bccc7b5924061 Mon Sep 17 00:00:00 2001
From: hell <helldweller@protonmail.com>
Date: Mon, 26 Oct 2026 10:49:27 +0700
Subject: [PATCH] feat: UI localization with vue-i18n and a per-user language
 setting

Adds vue-i18n with the English string as the message key, so templates
read $t("Report incident") and English needs no message file; Russian
lives in src/locales/ru.json. Vuetify's own strings follow the same
switch through its vue-i18n adapter, and relative dates use the active
locale. A custom messageResolver looks the whole key up before walking
dots as a path, so keys like "Loading... Please wait" resolve while
Vuetify's $vuetify.* messages keep working.

The language is chosen in the profile menu (avatar > Language) with a
button toggle instead of a select: a select's dropdown renders under the
profile menu overlay. The choice is kept in localStorage and in the new
dispatch_user_settings.locale column (migration c6baea6d5ae8) and applied
when /auth/me loads; without a saved choice the UI follows the browser.

This pass translates the shell: toolbar, profile menu, navigation (route
titles and groups), login/register, incident and case tables. Table
headers moved from data() to computed so they re-render on switch.
src/tests/setup.js installs i18n for every mount; i18n.spec.js covers the
resolver and the switch.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../administration/contributing/index.mdx     |  20 +++
 src/dispatch/auth/models.py                   |   5 +-
 .../core/versions/2026-10-26_c6baea6d5ae8.py  |  31 ++++
 .../static/dispatch/package-lock.json         |  83 +++++++++++
 src/dispatch/static/dispatch/package.json     |   1 +
 .../static/dispatch/src/auth/Login.vue        |  12 +-
 .../static/dispatch/src/auth/Register.vue     |  11 +-
 .../static/dispatch/src/auth/userSettings.js  |   2 +
 .../static/dispatch/src/case/Table.vue        |  42 +++---
 .../dispatch/src/components/AppDrawer.vue     |  18 +--
 .../dispatch/src/components/AppToolbar.vue    |  57 ++++++--
 src/dispatch/static/dispatch/src/filters.js   |   3 +-
 .../static/dispatch/src/i18n/index.js         |  54 +++++++
 .../static/dispatch/src/incident/Table.vue    |  48 ++++---
 .../static/dispatch/src/locales/ru.json       | 132 ++++++++++++++++++
 src/dispatch/static/dispatch/src/main.js      |   3 +
 .../static/dispatch/src/tests/i18n.spec.js    |  27 ++++
 .../static/dispatch/src/tests/setup.js        |   6 +
 .../static/dispatch/src/vuetify/index.js      |   6 +
 19 files changed, 483 insertions(+), 78 deletions(-)
 create mode 100644 src/dispatch/database/revisions/core/versions/2026-10-26_c6baea6d5ae8.py
 create mode 100644 src/dispatch/static/dispatch/src/i18n/index.js
 create mode 100644 src/dispatch/static/dispatch/src/locales/ru.json
 create mode 100644 src/dispatch/static/dispatch/src/tests/i18n.spec.js

diff --git a/docs/docs/administration/contributing/index.mdx b/docs/docs/administration/contributing/index.mdx
index 1224bae13cc7..5608164ecf4c 100644
--- a/docs/docs/administration/contributing/index.mdx
+++ b/docs/docs/administration/contributing/index.mdx
@@ -59,3 +59,23 @@ Push the tag:
 ```
 git push origin latest
 ```
+
+## Localization
+
+The UI is translated with [vue-i18n](https://vue-i18n.intlify.dev/). The English string is the
+message key, so templates read `{{ $t("Report incident") }}` or `:label="$t('Search')"` and English
+needs no message file: a key without a translation renders as itself. Translations live in
+`src/dispatch/static/dispatch/src/locales/<locale>.json` as a flat map from the English string to
+the translated one.
+
+- Keys may contain dots and punctuation; `src/i18n/index.js` looks the whole key up before treating
+  dots as a nested path (Vuetify's own `$vuetify.*` messages still use the nested form).
+- Table headers and other strings built in `data()` or plain functions must move to a `computed`
+  property (Options API) or call `t()` from `useI18n()` (`<script setup>`), otherwise they do not
+  follow a language switch.
+- Adding a language: import its Vuetify messages from `vuetify/locale`, add the JSON file and an
+  entry to `SUPPORTED_LOCALES` in `src/i18n/index.js`.
+
+Users pick the language in the profile menu (avatar → Language); the choice is stored both in the
+browser and in the user's settings (`locale` in `dispatch_user_settings`), so it follows them across
+devices. Without a saved choice the UI follows the browser language.
diff --git a/src/dispatch/auth/models.py b/src/dispatch/auth/models.py
index a8ec856dce16..714cbeb85919 100644
--- a/src/dispatch/auth/models.py
+++ b/src/dispatch/auth/models.py
@@ -8,7 +8,7 @@
 import bcrypt
 from jose import jwt
 from pydantic import field_validator
-from pydantic import EmailStr
+from pydantic import EmailStr, Field
 
 from sqlalchemy import DateTime, Column, String, LargeBinary, Integer, Boolean
 from sqlalchemy.dialects.postgresql import UUID
@@ -140,6 +140,8 @@ class DispatchUserSettings(Base, TimeStampMixin):
     dispatch_user = relationship(DispatchUser, backref="settings")
 
     auto_add_to_incident_bridges = Column(Boolean, default=True)
+    # UI language (BCP 47 tag such as "en" or "ru"); None means "follow the browser".
+    locale = Column(String, nullable=True)
 
 
 class UserProject(DispatchBase):
@@ -343,6 +345,7 @@ class UserSettingsBase(DispatchBase):
     """Base Pydantic model for user settings."""
 
     auto_add_to_incident_bridges: bool = True
+    locale: str | None = Field(None, max_length=16)
 
 
 class UserSettingsRead(UserSettingsBase):
diff --git a/src/dispatch/database/revisions/core/versions/2026-10-26_c6baea6d5ae8.py b/src/dispatch/database/revisions/core/versions/2026-10-26_c6baea6d5ae8.py
new file mode 100644
index 000000000000..248d56b5ba52
--- /dev/null
+++ b/src/dispatch/database/revisions/core/versions/2026-10-26_c6baea6d5ae8.py
@@ -0,0 +1,31 @@
+"""Add locale to dispatch_user_settings
+
+Stores the UI language a user picked in their profile. NULL means the
+frontend follows the browser language.
+
+Revision ID: c6baea6d5ae8
+Revises: b7e42c1d9a35
+Create Date: 2026-10-26 00:00:00.000000
+
+"""
+
+from alembic import op
+import sqlalchemy as sa
+
+# revision identifiers, used by Alembic.
+revision = "c6baea6d5ae8"
+down_revision = "b7e42c1d9a35"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    op.add_column(
+        "dispatch_user_settings",
+        sa.Column("locale", sa.String(), nullable=True),
+        schema="dispatch_core",
+    )
+
+
+def downgrade():
+    op.drop_column("dispatch_user_settings", "locale", schema="dispatch_core")
diff --git a/src/dispatch/static/dispatch/package-lock.json b/src/dispatch/static/dispatch/package-lock.json
index 051a2fa32aaa..5da9e41b687e 100644
--- a/src/dispatch/static/dispatch/package-lock.json
+++ b/src/dispatch/static/dispatch/package-lock.json
@@ -48,6 +48,7 @@
         "sortablejs": "^1.15.7",
         "swrv": "^1.3.0",
         "vue": "^3.5.44",
+        "vue-i18n": "^11.4.16",
         "vue-router": "^5.4.0",
         "vue3-apexcharts": "~1.7.0",
         "vue3-markdown-it": "^1.0.10",
@@ -1132,6 +1133,67 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "11.4.16",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.4.16.tgz",
+      "integrity": "sha512-xB8nMdMRLNx7b0zPvrHy0+N9uq9Vfi1aUxHqWgn2e2/TbjCKy8HfoFpnUXXxVP8I0p1ccd6LFSC3XsFjZ3vweA==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/devtools-types": "11.4.16",
+        "@intlify/message-compiler": "11.4.16",
+        "@intlify/shared": "11.4.16"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/devtools-types": {
+      "version": "11.4.16",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-types/-/devtools-types-11.4.16.tgz",
+      "integrity": "sha512-Bl7arICsKgwcSEQuZJun3swenN4jwSpg35lCpijFznYbW9GvkfH4wLxcI5+gz7d/EHqu66UT9CZDIdnQdgMAGg==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.4.16",
+        "@intlify/shared": "11.4.16"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.4.16",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.4.16.tgz",
+      "integrity": "sha512-p4lDWmBAsi3ja+PuEfPRavYyvqkYn/Upxz7UpnyI9LgIIy8XawcGIDzN+k99Z+99etO3HmDXGeTxnJIJGgSZ+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.4.16",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.4.16",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.4.16.tgz",
+      "integrity": "sha512-xehmkbEgbbNh/V+d8r3hFup0ViaN29YTJSAfRr28C54rxjyZEO0RNQKqW7VVajj16gLdglotNjiq+sIVNtHGzw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -10141,6 +10203,27 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "11.4.16",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.4.16.tgz",
+      "integrity": "sha512-Kv9tp6iTmaAeOwop7hkAo28N1IBsbSVpnxyE26b6gqc4Q2E9Ke3ZHHA3oqqwS6/cYLT1henZU4etTaLQxrK98Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.4.16",
+        "@intlify/devtools-types": "11.4.16",
+        "@intlify/shared": "11.4.16",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.4.0.tgz",
diff --git a/src/dispatch/static/dispatch/package.json b/src/dispatch/static/dispatch/package.json
index 5ed8ca58ffc1..2414c3d809f0 100644
--- a/src/dispatch/static/dispatch/package.json
+++ b/src/dispatch/static/dispatch/package.json
@@ -62,6 +62,7 @@
     "sortablejs": "^1.15.7",
     "swrv": "^1.3.0",
     "vue": "^3.5.44",
+    "vue-i18n": "^11.4.16",
     "vue-router": "^5.4.0",
     "vue3-apexcharts": "~1.7.0",
     "vue3-markdown-it": "^1.0.10",
diff --git a/src/dispatch/static/dispatch/src/auth/Login.vue b/src/dispatch/static/dispatch/src/auth/Login.vue
index 019bf381a0f4..dea49b1d2eec 100644
--- a/src/dispatch/static/dispatch/src/auth/Login.vue
+++ b/src/dispatch/static/dispatch/src/auth/Login.vue
@@ -1,14 +1,14 @@
 <template>
   <v-form @submit.prevent="basicLogin({ email, password })" v-slot="{ isValid }">
     <v-card class="mx-auto ma-4" max-width="600" variant="outlined" :loading="loading">
-      <v-card-title> Login </v-card-title>
+      <v-card-title> {{ $t("Login") }} </v-card-title>
       <v-card-text>
         <v-container>
           <v-row>
             <v-col cols="12" md="12">
               <v-text-field
                 v-model="email"
-                label="Email"
+                :label="$t('Email')"
                 name="Email"
                 :rules="[rules.required, rules.email]"
               />
@@ -17,7 +17,7 @@
               <v-text-field
                 v-model="password"
                 type="password"
-                label="Password"
+                :label="$t('Password')"
                 name="Password"
                 :rules="[rules.required]"
               />
@@ -27,8 +27,8 @@
       </v-card-text>
       <v-card-actions>
         <div v-if="registrationEnabled" class="text-subheader-2 pl-4 text-medium-emphasis">
-          Don't have a account?
-          <router-link :to="{ name: 'BasicRegister' }"> Register </router-link>
+          {{ $t("Don't have an account?") }}
+          <router-link :to="{ name: 'BasicRegister' }"> {{ $t("Register") }} </router-link>
         </div>
         <v-spacer />
         <v-btn
@@ -38,7 +38,7 @@
           :loading="loading"
           :disabled="!isValid"
         >
-          Login
+          {{ $t("Login") }}
           <template #loader>
             <v-progress-linear indeterminate color="white" />
           </template>
diff --git a/src/dispatch/static/dispatch/src/auth/Register.vue b/src/dispatch/static/dispatch/src/auth/Register.vue
index 2b969c433dda..df5ed533adcb 100644
--- a/src/dispatch/static/dispatch/src/auth/Register.vue
+++ b/src/dispatch/static/dispatch/src/auth/Register.vue
@@ -1,14 +1,14 @@
 <template>
   <v-form @submit.prevent="register({ email, password })" v-slot="{ isValid }">
     <v-card class="mx-auto ma-4" variant="outlined" max-width="600" flat :loading="loading">
-      <v-card-title> Register </v-card-title>
+      <v-card-title> {{ $t("Register") }} </v-card-title>
       <v-card-text>
         <v-container>
           <v-row>
             <v-col cols="12" md="12">
               <v-text-field
                 v-model="email"
-                label="Email"
+                :label="$t('Email')"
                 name="Email"
                 :rules="[rules.required, rules.email]"
               />
@@ -17,7 +17,7 @@
               <v-text-field
                 v-model="password"
                 type="password"
-                label="Password"
+                :label="$t('Password')"
                 name="Password"
                 :rules="[rules.required]"
               />
@@ -27,7 +27,8 @@
       </v-card-text>
       <v-card-actions>
         <div class="text-subheader-2 pl-4 text-medium-emphasis">
-          Have an account? <router-link :to="{ name: 'BasicLogin' }"> Login </router-link>
+          {{ $t("Have an account?") }}
+          <router-link :to="{ name: 'BasicLogin' }"> {{ $t("Login") }} </router-link>
         </div>
         <v-spacer />
         <v-btn
@@ -37,7 +38,7 @@
           :loading="loading"
           :disabled="!isValid"
         >
-          Register
+          {{ $t("Register") }}
           <template #loader>
             <v-progress-linear indeterminate color="white" />
           </template>
diff --git a/src/dispatch/static/dispatch/src/auth/userSettings.js b/src/dispatch/static/dispatch/src/auth/userSettings.js
index 6ccd245de194..6ed0938eb72b 100644
--- a/src/dispatch/static/dispatch/src/auth/userSettings.js
+++ b/src/dispatch/static/dispatch/src/auth/userSettings.js
@@ -1,10 +1,12 @@
 import store from "@/store"
 import UserApi from "./api"
+import { setLocale } from "@/i18n"
 
 function load() {
   return UserApi.getUserInfo().then(function (response) {
     // Update the full current user data including settings
     store.commit("auth/SET_CURRENT_USER", response.data)
+    if (response.data.settings?.locale) setLocale(response.data.settings.locale)
     // Also update projects for backward compatibility
     return store.commit("auth/SET_USER_PROJECTS", response.data.projects)
   })
diff --git a/src/dispatch/static/dispatch/src/case/Table.vue b/src/dispatch/static/dispatch/src/case/Table.vue
index 3d1f4078e68a..451c340859ac 100644
--- a/src/dispatch/static/dispatch/src/case/Table.vue
+++ b/src/dispatch/static/dispatch/src/case/Table.vue
@@ -9,7 +9,7 @@
       <escalate-dialog />
       <delete-dialog />
       <v-col>
-        <div class="text-h5">Cases</div>
+        <div class="text-h5">{{ $t("Cases") }}</div>
       </v-col>
       <v-col class="text-right">
         <table-filter-dialog :projects="defaultUserProjects" />
@@ -23,7 +23,7 @@
           hide-details
         >
           <v-icon start color="white">mdi-shield-search</v-icon>
-          <span class="text-uppercase text-body-2 font-weight-bold">Report case</span>
+          <span class="text-uppercase text-body-2 font-weight-bold">{{ $t("Report case") }}</span>
         </v-btn>
         <v-btn
           v-if="userAdminOrAbove(currentUserRole)"
@@ -42,7 +42,7 @@
             <v-text-field
               v-model="q"
               append-inner-icon="mdi-magnify"
-              label="Search"
+              :label="$t('Search')"
               single-line
               hide-details
               clearable
@@ -56,7 +56,7 @@
             :items-length="total || 0"
             :loading="loading"
             v-model="selected"
-            loading-text="Loading... Please wait"
+            :loading-text="$t('Loading... Please wait')"
             :sort-by="['reported_at']"
             :items-per-page="itemsPerPage"
             @click:row="showCasePage"
@@ -120,7 +120,7 @@
                       params: { name: item.name },
                     }"
                   >
-                    <v-list-item-title>View</v-list-item-title>
+                    <v-list-item-title>{{ $t("View") }}</v-list-item-title>
                   </v-list-item>
                   <v-list-item
                     :to="{
@@ -128,22 +128,22 @@
                       params: { name: item.name },
                     }"
                   >
-                    <v-list-item-title>Edit</v-list-item-title>
+                    <v-list-item-title>{{ $t("Edit") }}</v-list-item-title>
                   </v-list-item>
                   <v-list-item
                     @click="showRun({ type: 'case', data: item })"
                     :disabled="item.status == 'Escalated' || item.status == 'Closed'"
                   >
-                    <v-list-item-title>Run Workflow</v-list-item-title>
+                    <v-list-item-title>{{ $t("Run Workflow") }}</v-list-item-title>
                   </v-list-item>
                   <v-list-item
                     @click="showEscalateDialog(item)"
                     :disabled="item.status == 'Escalated' || item.status == 'Closed'"
                   >
-                    <v-list-item-title>Escalate</v-list-item-title>
+                    <v-list-item-title>{{ $t("Escalate") }}</v-list-item-title>
                   </v-list-item>
                   <v-list-item @click="showDeleteDialog(item)">
-                    <v-list-item-title>Delete</v-list-item-title>
+                    <v-list-item-title>{{ $t("Delete") }}</v-list-item-title>
                   </v-list-item>
                 </v-list>
               </v-menu>
@@ -160,6 +160,7 @@
 import { ref, computed, watch } from "vue"
 import { useStore } from "vuex"
 import { useRoute, useRouter } from "vue-router"
+import { useI18n } from "vue-i18n"
 import { formatRelativeDate, formatDate } from "@/filters"
 
 import BulkEditSheet from "@/case/BulkEditSheet.vue"
@@ -176,6 +177,7 @@ import RouterUtils from "@/router/utils"
 import TableExportDialog from "@/case/TableExportDialog.vue"
 import TableFilterDialog from "@/case/TableFilterDialog.vue"
 
+const { t } = useI18n()
 const store = useStore()
 const router = useRouter()
 const route = useRoute()
@@ -221,17 +223,17 @@ const showCasePage = (e, { item }) => {
 
 function loadHeaders() {
   return [
-    { title: "Name", value: "name", align: "left", width: "10%" },
-    { title: "Title", value: "title", sortable: false },
-    { title: "Status", value: "status" },
-    { title: "Type", value: "case_type.name", sortable: true },
-    { title: "Severity", value: "case_severity.name", sortable: true },
-    { title: "Priority", value: "case_priority.name", sortable: true },
-    { title: "Project", value: "project.display_name", sortable: true },
-    { title: "Assignee", value: "assignee", sortable: false },
-    { title: "Cost", key: "case_costs", sortable: false },
-    { title: "Reported At", value: "reported_at", sortable: true },
-    { title: "Closed At", value: "closed_at", sortable: true },
+    { title: t("Name"), value: "name", align: "left", width: "10%" },
+    { title: t("Title"), value: "title", sortable: false },
+    { title: t("Status"), value: "status" },
+    { title: t("Type"), value: "case_type.name", sortable: true },
+    { title: t("Severity"), value: "case_severity.name", sortable: true },
+    { title: t("Priority"), value: "case_priority.name", sortable: true },
+    { title: t("Project"), value: "project.display_name", sortable: true },
+    { title: t("Assignee"), value: "assignee", sortable: false },
+    { title: t("Cost"), key: "case_costs", sortable: false },
+    { title: t("Reported At"), value: "reported_at", sortable: true },
+    { title: t("Closed At"), value: "closed_at", sortable: true },
     { title: "", key: "data-table-actions", sortable: false, align: "end" },
   ]
 }
diff --git a/src/dispatch/static/dispatch/src/components/AppDrawer.vue b/src/dispatch/static/dispatch/src/components/AppDrawer.vue
index 92fcd03c2d8c..f0c1ee9e9622 100644
--- a/src/dispatch/static/dispatch/src/components/AppDrawer.vue
+++ b/src/dispatch/static/dispatch/src/components/AppDrawer.vue
@@ -8,12 +8,12 @@
             :key="index"
             :to="{ name: route.name }"
             :prepend-icon="route.meta.icon"
-            :title="route.meta.title"
+            :title="$t(route.meta.title)"
           />
           <v-list-item
             @click.stop="toggleMiniNav()"
             :prepend-icon="mini ? 'mdi-chevron-right' : 'mdi-chevron-left'"
-            title="Minimize"
+            :title="$t('Minimize')"
           />
         </v-list>
       </v-navigation-drawer>
@@ -24,21 +24,21 @@
               v-if="showFilter"
               v-model="q"
               append-inner-icon="mdi-magnify"
-              label="Filter"
+              :label="$t('Filter')"
               single-line
               hide-details
             />
           </v-list-item>
           <span v-for="(subRoutes, group, idx) in children" :key="group">
             <v-list-subheader class="text-capitalize">
-              {{ group }}
+              {{ $t(group) }}
             </v-list-subheader>
             <v-list-item
               v-for="(route, subIndex) in subRoutes"
               :key="subIndex"
               :to="{ name: route.name, query: childrenQueryParams }"
             >
-              <v-list-item-title>{{ route.meta.title }}</v-list-item-title>
+              <v-list-item-title>{{ $t(route.meta.title) }}</v-list-item-title>
             </v-list-item>
             <v-divider v-if="idx != Object.keys(children).length - 1" />
           </span>
@@ -53,16 +53,16 @@
         :key="index"
         :to="{ name: route.name }"
         :prepend-icon="route.meta.icon"
-        :title="route.meta.title"
+        :title="$t(route.meta.title)"
       >
-        <v-tooltip v-if="mini" activator="parent" location="right" :text="route.meta.title" />
+        <v-tooltip v-if="mini" activator="parent" location="right" :text="$t(route.meta.title)" />
       </v-list-item>
       <v-list-item
         @click.stop="toggleMiniNav()"
         :prepend-icon="mini ? 'mdi-chevron-right' : 'mdi-chevron-left'"
-        title="Minimize"
+        :title="$t('Minimize')"
       >
-        <v-tooltip v-if="mini" activator="parent" location="right" text="Minimize" />
+        <v-tooltip v-if="mini" activator="parent" location="right" :text="$t('Minimize')" />
       </v-list-item>
     </v-list>
   </v-navigation-drawer>
diff --git a/src/dispatch/static/dispatch/src/components/AppToolbar.vue b/src/dispatch/static/dispatch/src/components/AppToolbar.vue
index 8b3ca59ebee7..a867026da126 100644
--- a/src/dispatch/static/dispatch/src/components/AppToolbar.vue
+++ b/src/dispatch/static/dispatch/src/components/AppToolbar.vue
@@ -13,7 +13,7 @@
       v-model="queryString"
       hide-details
       prepend-inner-icon="mdi-magnify"
-      label="Search"
+      :label="$t('Search')"
       clearable
       variant="solo"
       single-line
@@ -32,12 +32,14 @@
         hide-details
       >
         <v-icon start color="error">mdi-shield-search</v-icon>
-        <span class="text-uppercase text-body-2 font-weight-bold">Report Security Event</span>
+        <span class="text-uppercase text-body-2 font-weight-bold">{{
+          $t("Report Security Event")
+        }}</span>
       </v-btn>
       <v-btn icon variant="text" @click="toggleDarkTheme">
         <v-icon :icon="dark_theme ? 'mdi-white-balance-sunny' : 'mdi-moon-waxing-crescent'" />
         <v-tooltip activator="parent" location="bottom">
-          Dark Mode {{ dark_theme ? "Off" : "On" }}
+          {{ $t(dark_theme ? "Dark Mode Off" : "Dark Mode On") }}
         </v-tooltip>
       </v-btn>
       <v-btn icon variant="text">
@@ -47,13 +49,13 @@
             <v-list-item
               href="/api/v1/docs"
               target="_blank"
-              title="API Documentation"
+              :title="$t('API Documentation')"
               append-icon="mdi-open-in-new"
             />
             <v-list-item
               href="https://helldweller.github.io/dispatch/"
               target="_blank"
-              title="App Documentation"
+              :title="$t('App Documentation')"
               append-icon="mdi-open-in-new"
             />
             <v-list-item
@@ -63,7 +65,7 @@
               append-icon="mdi-open-in-new"
             >
               <v-list-item-title>
-                Current version: {{ formatHash(currentVersion())
+                {{ $t("Current version") }}: {{ formatHash(currentVersion())
                 }}{{
                   currentVersionDate() && currentVersionDate() !== "Unknown"
                     ? ` (${currentVersionDate()})`
@@ -93,19 +95,19 @@
                   <template #activator="{ props }">
                     <v-btn icon="mdi-logout" variant="plain" v-bind="props" @click="logout()" />
                   </template>
-                  <span>Logout</span>
+                  <span>{{ $t("Logout") }}</span>
                 </v-tooltip>
               </template>
             </v-list-item>
             <v-divider />
-            <v-list-subheader>User Preferences</v-list-subheader>
+            <v-list-subheader>{{ $t("User Preferences") }}</v-list-subheader>
             <v-switch
               v-model="currentUser().experimental_features"
               inset
               class="ml-5"
               color="blue"
               @update:model-value="updateExperimentalFeatures()"
-              label="Experimental Features"
+              :label="$t('Experimental Features')"
             />
             <v-switch
               v-model="bridgePreference"
@@ -113,10 +115,24 @@
               class="ml-5"
               color="blue"
               @click.stop
-              label="Add me automatically to incident bridges"
+              :label="$t('Add me automatically to incident bridges')"
             />
+            <v-list-subheader>{{ $t("Language") }}</v-list-subheader>
+            <v-btn-toggle
+              v-model="locale"
+              mandatory
+              density="compact"
+              variant="outlined"
+              divided
+              class="mx-5 mb-3"
+              @click.stop
+            >
+              <v-btn v-for="lang in languages" :key="lang.value" :value="lang.value" size="small">
+                {{ lang.text }}
+              </v-btn>
+            </v-btn-toggle>
             <v-divider />
-            <v-list-subheader>Organizations</v-list-subheader>
+            <v-list-subheader>{{ $t("Organizations") }}</v-list-subheader>
             <v-list-item v-for="(item, i) in organizations" :key="i">
               <v-list-item-title>{{ item.name }}</v-list-item-title>
               <v-list-item-subtitle>{{ item.description }}</v-list-item-subtitle>
@@ -131,7 +147,7 @@
                       @click="showCreateEditDialog(item)"
                     />
                   </template>
-                  <span>Edit Organization</span>
+                  <span>{{ $t("Edit Organization") }}</span>
                 </v-tooltip>
                 <v-tooltip location="bottom">
                   <template #activator="{ props }">
@@ -142,12 +158,12 @@
                       v-bind="props"
                     />
                   </template>
-                  <span>Switch Organization</span>
+                  <span>{{ $t("Switch Organization") }}</span>
                 </v-tooltip>
               </template>
             </v-list-item>
             <v-list-item @click="showCreateEditDialog()" prepend-icon="mdi-plus">
-              <v-list-item-title>Create a new organization</v-list-item-title>
+              <v-list-item-title>{{ $t("Create a new organization") }}</v-list-item-title>
             </v-list-item>
           </v-list>
         </v-menu>
@@ -165,6 +181,7 @@ import OrganizationCreateEditDialog from "@/organization/CreateEditDialog.vue"
 import UserApi from "@/auth/api"
 import CurrentUserAvatar from "@/atomics/CurrentUserAvatar.vue"
 import { mapFields } from "vuex-map-fields"
+import { SUPPORTED_LOCALES, setLocale } from "@/i18n"
 
 export default {
   name: "AppToolbar",
@@ -172,6 +189,7 @@ export default {
     organizations: [],
     query: "",
     dark_theme: false,
+    languages: SUPPORTED_LOCALES,
   }),
   setup() {
     return { formatHash }
@@ -211,6 +229,17 @@ export default {
           })
       },
     },
+    locale: {
+      get() {
+        return this.$i18n.locale
+      },
+      set(value) {
+        setLocale(value)
+        this.$store.dispatch("auth/updateUserSettings", { locale: value }).catch((error) => {
+          console.error("Error occurred while saving language preference: ", error)
+        })
+      },
+    },
     defaultUserProjects() {
       if (!this.projects || this.projects.length === 0) {
         return []
diff --git a/src/dispatch/static/dispatch/src/filters.js b/src/dispatch/static/dispatch/src/filters.js
index 168eafa91523..5dd29d862d6c 100644
--- a/src/dispatch/static/dispatch/src/filters.js
+++ b/src/dispatch/static/dispatch/src/filters.js
@@ -1,5 +1,6 @@
 import { parseISO, formatISO } from "date-fns"
 import moment from "moment-timezone"
+import { currentLocale } from "@/i18n"
 
 const time_format = "YYYY-MM-DD HH:mm:ss"
 const zones_to_show = ["America/Los_Angeles", "America/New_York"]
@@ -63,7 +64,7 @@ export function formatRelativeDate(value) {
       second: 1000,
     }
 
-    const rtf = new Intl.RelativeTimeFormat("en", {
+    const rtf = new Intl.RelativeTimeFormat(currentLocale(), {
       localeMatcher: "best fit", // other values: "lookup"
       numeric: "always", // other values: "auto"
       style: "long", // other values: "short" or "narrow"
diff --git a/src/dispatch/static/dispatch/src/i18n/index.js b/src/dispatch/static/dispatch/src/i18n/index.js
new file mode 100644
index 000000000000..4916ab20b78e
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/i18n/index.js
@@ -0,0 +1,54 @@
+import { createI18n } from "vue-i18n"
+import { en as vuetifyEn, ru as vuetifyRu } from "vuetify/locale"
+import ru from "@/locales/ru.json"
+
+// Natural keys: the English UI string is the key, `ru.json` maps it to Russian.
+// English therefore needs no message file -- a missing key falls back to itself.
+export const SUPPORTED_LOCALES = [
+  { value: "en", text: "English" },
+  { value: "ru", text: "Русский" },
+]
+
+const STORAGE_KEY = "locale"
+
+export function detectLocale() {
+  const stored = localStorage.getItem(STORAGE_KEY)
+  if (SUPPORTED_LOCALES.some((l) => l.value === stored)) return stored
+  const browser = (navigator.language || "en").split("-")[0]
+  return SUPPORTED_LOCALES.some((l) => l.value === browser) ? browser : "en"
+}
+
+// Natural keys contain dots ("Loading... Please wait"), which vue-i18n would
+// otherwise treat as a nested path. Look the whole key up first and only then
+// walk the path, which Vuetify's own `$vuetify.x.y` keys still need.
+export function resolveMessage(messages, path) {
+  if (Object.prototype.hasOwnProperty.call(messages, path)) return messages[path]
+  return path.split(".").reduce((node, key) => (node == null ? undefined : node[key]), messages)
+}
+
+export const i18n = createI18n({
+  legacy: false,
+  globalInjection: true,
+  locale: detectLocale(),
+  fallbackLocale: "en",
+  messageResolver: resolveMessage,
+  missingWarn: false,
+  fallbackWarn: false,
+  messages: {
+    en: { $vuetify: vuetifyEn },
+    ru: { $vuetify: vuetifyRu, ...ru },
+  },
+})
+
+export function currentLocale() {
+  return i18n.global.locale.value
+}
+
+export function setLocale(locale) {
+  if (!SUPPORTED_LOCALES.some((l) => l.value === locale)) return
+  i18n.global.locale.value = locale
+  document.documentElement.lang = locale
+  localStorage.setItem(STORAGE_KEY, locale)
+}
+
+export default i18n
diff --git a/src/dispatch/static/dispatch/src/incident/Table.vue b/src/dispatch/static/dispatch/src/incident/Table.vue
index 04caeb714f5c..990a1082f93d 100644
--- a/src/dispatch/static/dispatch/src/incident/Table.vue
+++ b/src/dispatch/static/dispatch/src/incident/Table.vue
@@ -9,14 +9,16 @@
       <report-dialog />
       <workflow-run-modal />
       <v-col>
-        <div class="text-h5">Incidents</div>
+        <div class="text-h5">{{ $t("Incidents") }}</div>
       </v-col>
       <v-col class="text-right">
         <table-filter-dialog :projects="defaultUserProjects" />
         <table-export-dialog />
         <v-btn nav variant="flat" color="error" :to="{ name: 'report' }" class="ml-2" hide-details>
           <v-icon start color="white">mdi-fire</v-icon>
-          <span class="text-uppercase text-body-2 font-weight-bold">Report incident</span>
+          <span class="text-uppercase text-body-2 font-weight-bold">{{
+            $t("Report incident")
+          }}</span>
         </v-btn>
         <v-btn
           v-if="userAdminOrAbove(current_user_role)"
@@ -35,7 +37,7 @@
             <v-text-field
               v-model="q"
               append-inner-icon="mdi-magnify"
-              label="Search"
+              :label="$t('Search')"
               single-line
               hide-details
               clearable
@@ -53,7 +55,7 @@
             :loading="loading"
             data-testid="incident-data-table"
             v-model="selected"
-            loading-text="Loading... Please wait"
+            :loading-text="$t('Loading... Please wait')"
             show-select
             return-object
             @click:row="showIncidentEditSheet"
@@ -115,19 +117,19 @@
                       params: { name: item.name },
                     }"
                   >
-                    <v-list-item-title>View / Edit</v-list-item-title>
+                    <v-list-item-title>{{ $t("View / Edit") }}</v-list-item-title>
                   </v-list-item>
                   <v-list-item @click="showReportDialog(item)" :disabled="item.status == 'Closed'">
-                    <v-list-item-title>Create Report</v-list-item-title>
+                    <v-list-item-title>{{ $t("Create Report") }}</v-list-item-title>
                   </v-list-item>
                   <v-list-item
                     @click="showRun({ type: 'incident', data: item })"
                     :disabled="item.status == 'Closed'"
                   >
-                    <v-list-item-title>Run Workflow</v-list-item-title>
+                    <v-list-item-title>{{ $t("Run Workflow") }}</v-list-item-title>
                   </v-list-item>
                   <v-list-item @click="showDeleteDialog(item)">
-                    <v-list-item-title>Delete</v-list-item-title>
+                    <v-list-item-title>{{ $t("Delete") }}</v-list-item-title>
                   </v-list-item>
                 </v-list>
               </v-menu>
@@ -185,20 +187,6 @@ export default {
 
   data() {
     return {
-      headers: [
-        { title: "Name", key: "name", align: "left", width: "10%" },
-        { title: "Title", key: "title", sortable: false },
-        { title: "Status", key: "status" },
-        { title: "Type", key: "incident_type.name" },
-        { title: "Severity", key: "incident_severity.name", width: "10%" },
-        { title: "Priority", key: "incident_priority.name", width: "10%" },
-        { title: "Project", key: "project.display_name", sortable: true },
-        { title: "Commander", key: "commander", sortable: false },
-        { title: "Cost", key: "incident_costs", sortable: false },
-        { title: "Reported At", key: "reported_at" },
-        { title: "Closed At", key: "closed_at" },
-        { title: "", key: "data-table-actions", sortable: false, align: "end" },
-      ],
       showEditSheet: false,
     }
   },
@@ -208,6 +196,22 @@ export default {
   },
 
   computed: {
+    headers() {
+      return [
+        { title: this.$t("Name"), key: "name", align: "left", width: "10%" },
+        { title: this.$t("Title"), key: "title", sortable: false },
+        { title: this.$t("Status"), key: "status" },
+        { title: this.$t("Type"), key: "incident_type.name" },
+        { title: this.$t("Severity"), key: "incident_severity.name", width: "10%" },
+        { title: this.$t("Priority"), key: "incident_priority.name", width: "10%" },
+        { title: this.$t("Project"), key: "project.display_name", sortable: true },
+        { title: this.$t("Commander"), key: "commander", sortable: false },
+        { title: this.$t("Cost"), key: "incident_costs", sortable: false },
+        { title: this.$t("Reported At"), key: "reported_at" },
+        { title: this.$t("Closed At"), key: "closed_at" },
+        { title: "", key: "data-table-actions", sortable: false, align: "end" },
+      ]
+    },
     ...mapFields("incident", [
       "table.loading",
       "table.options.descending",
diff --git a/src/dispatch/static/dispatch/src/locales/ru.json b/src/dispatch/static/dispatch/src/locales/ru.json
new file mode 100644
index 000000000000..a23e832541ed
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/locales/ru.json
@@ -0,0 +1,132 @@
+{
+  "API Documentation": "Документация API",
+  "App Documentation": "Документация приложения",
+  "Current version": "Текущая версия",
+  "Dark Mode Off": "Выключить тёмную тему",
+  "Dark Mode On": "Включить тёмную тему",
+  "Report Security Event": "Сообщить о событии безопасности",
+  "Search": "Поиск",
+  "Logout": "Выйти",
+  "User Preferences": "Настройки пользователя",
+  "Experimental Features": "Экспериментальные функции",
+  "Add me automatically to incident bridges": "Автоматически подключать меня к конференциям инцидентов",
+  "Language": "Язык",
+  "Organizations": "Организации",
+  "Edit Organization": "Изменить организацию",
+  "Switch Organization": "Переключить организацию",
+  "Create a new organization": "Создать новую организацию",
+  "Minimize": "Свернуть",
+  "Filter": "Фильтр",
+
+  "Login": "Войти",
+  "Register": "Регистрация",
+  "Email": "Электронная почта",
+  "Password": "Пароль",
+  "Don't have an account?": "Нет учётной записи?",
+  "Have an account?": "Уже есть учётная запись?",
+
+  "Incidents": "Инциденты",
+  "Cases": "Кейсы",
+  "Signals": "Сигналы",
+  "Tasks": "Задачи",
+  "Feedback": "Обратная связь",
+  "Dashboards": "Дашборды",
+  "Data": "Данные",
+  "Settings": "Настройки",
+  "Search Filters": "Фильтры поиска",
+  "Report": "Сообщить",
+  "Case Report": "Сообщить о кейсе",
+  "Event Report": "Сообщить о событии",
+  "List": "Список",
+  "Page": "Страница",
+  "Not Found": "Не найдено",
+  "Server Error": "Ошибка сервера",
+  "Source Detail": "Источник",
+  "Incident and Case feedback": "Отзывы по инцидентам и кейсам",
+  "Oncall feedback": "Отзывы дежурных",
+  "Oncall Services": "Дежурные службы",
+  "Dispatch": "Dispatch",
+  "Dispatch Mfa": "Dispatch MFA",
+
+  "AI Prompts": "Подсказки ИИ",
+  "Auth": "Аутентификация",
+  "Case Status": "Статусы кейсов",
+  "Cost Models": "Модели затрат",
+  "Cost Types": "Типы затрат",
+  "Definitions": "Определения",
+  "Email Templates": "Шаблоны писем",
+  "Entity Types": "Типы сущностей",
+  "Forms": "Формы",
+  "Form Types": "Типы форм",
+  "Incident Status": "Статусы инцидентов",
+  "Individuals": "Люди",
+  "Members": "Участники",
+  "Notifications": "Уведомления",
+  "Plugins": "Плагины",
+  "Priorities": "Приоритеты",
+  "Projects": "Проекты",
+  "Project Settings": "Настройки проекта",
+  "Queries": "Запросы",
+  "References": "Ссылки",
+  "Roles": "Роли",
+  "Runbooks": "Инструкции",
+  "Severities": "Серьёзность",
+  "Source Data Formats": "Форматы данных источников",
+  "Source Environments": "Окружения источников",
+  "Sources": "Источники",
+  "Source Statuses": "Статусы источников",
+  "Source Transports": "Транспорты источников",
+  "Source Types": "Типы источников",
+  "Tags": "Теги",
+  "Tag Types": "Типы тегов",
+  "Teams": "Команды",
+  "Templates": "Шаблоны",
+  "Terms": "Термины",
+  "Types": "Типы",
+  "Workflows": "Рабочие процессы",
+
+  "auth": "аутентификация",
+  "case": "кейс",
+  "cases": "кейсы",
+  "contact": "контакты",
+  "dashboard": "дашборд",
+  "data": "данные",
+  "documentation": "документация",
+  "feedback": "обратная связь",
+  "forms": "формы",
+  "general": "общее",
+  "incident": "инцидент",
+  "incidents": "инциденты",
+  "knowledge": "знания",
+  "organization": "организация",
+  "project": "проект",
+  "search": "поиск",
+  "settings": "настройки",
+  "signal": "сигнал",
+  "signals": "сигналы",
+  "tasks": "задачи",
+  "type": "тип",
+
+  "Name": "Название",
+  "Title": "Заголовок",
+  "Status": "Статус",
+  "Type": "Тип",
+  "Severity": "Серьёзность",
+  "Priority": "Приоритет",
+  "Project": "Проект",
+  "Commander": "Командир",
+  "Assignee": "Исполнитель",
+  "Cost": "Затраты",
+  "Reported At": "Создан",
+  "Closed At": "Закрыт",
+  "Report incident": "Сообщить об инциденте",
+  "Report case": "Сообщить о кейсе",
+  "Loading... Please wait": "Загрузка... Подождите",
+  "View / Edit": "Открыть / Изменить",
+  "View": "Открыть",
+  "Edit": "Изменить",
+  "Create Report": "Создать отчёт",
+  "Run Workflow": "Запустить рабочий процесс",
+  "Escalate": "Эскалировать",
+  "Delete": "Удалить"
+}
diff --git a/src/dispatch/static/dispatch/src/main.js b/src/dispatch/static/dispatch/src/main.js
index 5b8e7de6961f..094228ab1da4 100644
--- a/src/dispatch/static/dispatch/src/main.js
+++ b/src/dispatch/static/dispatch/src/main.js
@@ -1,5 +1,6 @@
 import { createApp } from "vue"
 import App from "./App.vue"
+import i18n, { setLocale } from "./i18n"
 import { vuetifyPlugin } from "./vuetify/"
 import router from "./router/"
 import store from "./store"
@@ -43,6 +44,8 @@ if (SENTRY_ENABLED) {
 }
 
 // Configure plugins
+app.use(i18n)
+setLocale(i18n.global.locale.value)
 app.use(vuetifyPlugin)
 app.use(router)
 app.use(store)
diff --git a/src/dispatch/static/dispatch/src/tests/i18n.spec.js b/src/dispatch/static/dispatch/src/tests/i18n.spec.js
new file mode 100644
index 000000000000..ffa34e541d60
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/tests/i18n.spec.js
@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest"
+
+import i18n, { resolveMessage, setLocale } from "@/i18n"
+
+describe("i18n", () => {
+  it("resolves natural keys with dots before walking nested paths", () => {
+    const messages = { "Loading... Please wait": "Загрузка", $vuetify: { close: "Закрыть" } }
+    expect(resolveMessage(messages, "Loading... Please wait")).toBe("Загрузка")
+    expect(resolveMessage(messages, "$vuetify.close")).toBe("Закрыть")
+    expect(resolveMessage(messages, "missing.key")).toBeUndefined()
+  })
+
+  it("falls back to the English key and switches Vuetify strings with the app", () => {
+    setLocale("ru")
+    expect(i18n.global.t("Incidents")).toBe("Инциденты")
+    expect(i18n.global.t("Untranslated string")).toBe("Untranslated string")
+    expect(i18n.global.t("$vuetify.close")).toBe("Закрыть")
+    expect(localStorage.getItem("locale")).toBe("ru")
+
+    setLocale("en")
+    expect(i18n.global.t("Incidents")).toBe("Incidents")
+    expect(i18n.global.t("$vuetify.close")).toBe("Close")
+
+    setLocale("xx")
+    expect(i18n.global.locale.value).toBe("en")
+  })
+})
diff --git a/src/dispatch/static/dispatch/src/tests/setup.js b/src/dispatch/static/dispatch/src/tests/setup.js
index 7a16838796c5..3983a7b040ff 100644
--- a/src/dispatch/static/dispatch/src/tests/setup.js
+++ b/src/dispatch/static/dispatch/src/tests/setup.js
@@ -1,3 +1,9 @@
+import { config } from "@vue/test-utils"
+import i18n from "@/i18n"
+
+// Components call $t(); install vue-i18n globally so specs need no per-mount plugin.
+config.global.plugins.push(i18n)
+
 // happy-dom implements neither window.visualViewport nor ResizeObserver;
 // Vuetify's overlay positioning code requires both, so every test that opens
 // a menu or dialog crashes without these stubs.
diff --git a/src/dispatch/static/dispatch/src/vuetify/index.js b/src/dispatch/static/dispatch/src/vuetify/index.js
index 16e5a9d6283a..87dd46634d30 100644
--- a/src/dispatch/static/dispatch/src/vuetify/index.js
+++ b/src/dispatch/static/dispatch/src/vuetify/index.js
@@ -4,9 +4,15 @@ import "@/styles/vuetify-md2-compat.css"
 import { createVuetify } from "vuetify"
 import * as components from "vuetify/components"
 import * as directives from "vuetify/directives"
+import { createVueI18nAdapter } from "vuetify/locale/adapters/vue-i18n"
+import { useI18n } from "vue-i18n"
+import i18n from "@/i18n"
 
 export function vuetifyPlugin(app) {
   const vuetify = createVuetify({
+    locale: {
+      adapter: createVueI18nAdapter({ i18n, useI18n }),
+    },
     defaults: {
       VTextField: {
         variant: "underlined",