Repository navigation
🎃 Set up i18n in the frontend and translate the sidebar and sign-in form (DE, IT) #1008
Description
Part of the October Challenge #997.
Why
The website guides and the README already exist in German and Italian (content/guides/de, content/guides/it, README.de.md), but the admin UI is English only. Every string is hard-coded in JSX, <html lang="en"> is fixed (app/layout.tsx:72), and there is no i18n library. The only translated UI is the cookie banner (components/cookie-consent.tsx:37-391, browser language detection at :424-426), which only renders when GTM is configured. Teams whose staff work in German or Italian have to put up with an English admin UI, and adding a language later gets harder with every new page.
This issue lays the foundation and proves it on two surfaces: the sidebar and the sign-in form. Other pages follow in separate issues, one area at a time.
Self-hosted vs Cloud
- Self-hosted: same in Community and Business. Frontend only: no backend or database change, no
ee/code. - Cloud (
DEPLOYMENT_MODE=cloud): same image, same behaviour. The language is a per-browser preference stored in a cookie, not a workspace or instance setting, so members of one workspace can use different languages. - Who can use it: everyone, including signed-out visitors on
/login.
What to build
- Library:
next-intlin its "without i18n routing" setup. Reasons: it supports the App Router with server and client components, ICU messages (plurals such as "1 tool" / "3 tools") and typed message keys. Without routing there are no/de/...URL prefixes, so the auth gate inproxy.ts, the backend rewrites innext.config.tsand every?redirect=link keep working unchanged. Almost every page is a client component, so the messages are passed once throughNextIntlClientProviderin the root layout. Before you start, check that the currentnext-intlrelease supports thenextversion inpackages/frontend/package.json(16.x) and name the version in the PR. This Next.js version has breaking changes (seepackages/frontend/AGENTS.md), so read the docs it ships innode_modules/next/dist/docs/as well. Ifnext-intldoes not fit, comment here before building an alternative. - Locale resolution (server side): the cookie
amcp_localeif it holds a supported locale, otherwise the best match fromAccept-Language, otherwiseen. Supported:en,de,it. Set<html lang>from it inapp/layout.tsx:72. The root layout is alreadyforce-dynamic(:58), so reading the cookie per request costs nothing extra.app/global-error.tsx:30can stayen. - Messages:
packages/frontend/messages/{en,de,it}.json, nested by area (nav.*,signIn.*). English is the source. A key missing indeoritfalls back to English and never shows a raw key. - Sidebar (
components/app-sidebar.tsx): the group titles and item labels inNAV(:45-73), "Switch workspace" (:156), "Log out" (:188), "Settings" (:205), the "Workspace" fallback (:216) and the "Star on GitHub" texts (components/github-star-button.tsx:54-60).hrefs and the active-item logic stay as they are. - Sign-in form (
app/login/page.tsx:851-1144, sign-in mode only,!isRegister): heading, labels, placeholders, the submit button states, "Forgot password?", the recovery-code texts, the "or" divider, "Don't have an account? Register", "Email verified successfully!…", "Signing you in…", and the client-side messages shown in this mode. The registration and Cloud sign-up variants and the verification and licence steps stay English in this issue. - Language switcher: a select (English, Deutsch, Italiano) in Settings → Profile (
app/settings/page.tsx) and a small one under the sign-in card. It writes the cookie (one year,SameSite=Lax,Path=/) and callsrouter.refresh(). - Translations: match the tone of the existing German and Italian guides in
content/guides/deandcontent/guides/it. If you are not a native speaker of one of the languages, say so in the PR so a maintainer can review those strings. - Contributor note: a short "Translating the UI" section in
.github/CONTRIBUTING.md: where the messages live, how to add a key, English is the source.
Where to look
packages/frontend/src/app/layout.tsx:51-89: root layout (force-dynamic,<html lang>).packages/frontend/src/app/providers.tsx: client providers to wrap.packages/frontend/src/proxy.ts: auth gate and public paths; must keep working unchanged.packages/frontend/src/components/app-sidebar.tsx:45-73,:156,:188,:205,:216.packages/frontend/src/app/login/page.tsx:851-1144: the auth form.packages/frontend/src/components/cookie-consent.tsx:37-391,:424-426: the banner's own translations (leave them as they are).packages/frontend/src/lib/translation-safe-dom.ts: keeps browser page translation from crashing React; keep it.packages/frontend/tests/e2e/: many tests match English text, so English must stay the result forAccept-Language: en-US, Playwright's default.
Acceptance criteria
- Without the cookie,
Accept-Language: de-DErenders/loginand the sidebar in German with<html lang="de">;it-ITgives Italian;fr-FRgives English. - A language chosen in Settings persists across reloads and sign-out.
- Playwright tests for the cases above (
test.use({ locale: 'de-DE' })), plus a key-parity test that loads the three JSON files and fails whendeoritmisses or adds a key. All existing tests pass unchanged (cd packages/frontend && npm run test:e2e). - URLs are unchanged:
login-redirect-query.spec.tsandlogin-redirect-safe.spec.tspass. -
npm run lint,npx tsc --noEmit -p tsconfig.jsonandnpm run buildpass inpackages/frontend. - Screenshots of the sidebar and the sign-in form in German and Italian in the PR.
Out of scope
- Other pages (follow-up issues), the backend-rendered OAuth sign-in and consent pages (
packages/backend/src/auth/auth-page.ts), emails and API error messages. - Locale-prefixed URLs, right-to-left languages, languages other than German and Italian.
- Storing the language on the user account.
- Changing date or number formatting.
Size
L (several days, may be split: library, locale resolution and sidebar first; sign-in form and switcher second).
How to claim
Comment "I'd like to work on this" and we'll assign you. Rules in #997.
Activity
sapatmohit commentedon Oct 24, 2026
I'd like to work on this
helpcodeai commentedon Oct 24, 2026
@sapatmohit it's yours, thanks! GitHub only lets us formally assign repository members, so this comment is the assignment.
This one is sized L, so please split it as the issue suggests, and open the first PR within the 7 days from #997:
next-intlwithout i18n routing, locale resolution (cookieamcp_locale, thenAccept-Language, thenen),<html lang>, the three message files with the key-parity test, and the sidebar.Before writing code, check that the current
next-intlrelease supports our Next.js 16 and name the version in the PR. If it doesn't fit, comment here first. Many Playwright tests match English text, soAccept-Language: en-USmust keep rendering exactly what it renders today.If German or Italian isn't your native language, just say so in the PR and we'll review those strings.
Add i18n foundation with next-intl and translate the sidebar (#1248)
Translate the sign-in form and add a language switcher (#1257)
sapatmohit commentedon Oct 25, 2026
Thanks for the quick reviews on #1248 and #1257! Now that the foundation is in, only
nav,signInandlanguageare translated, so most of the UI is still English-only in DE and IT.I'd like to keep going and translate the rest, in the same small-PR style. A rough split, smallest and most-seen first:
/login,/forgot-password,/reset-password,/verify-email,/accept-invite,/welcome,/start-trial/logs,/analytics/mcp-server,/mcp-server/[id]/connectors,/connectors/store,/connectors/setup/[slug],/connectors/new/connectors/[id]/settings/*,/admin/*(likely split in two, it's the biggest area)/knowledge-graph,/knowledge-graph/skills,/memoryEach PR adds one namespace per area to
en.json,de.jsonandit.json, keeps the key-parity test green and doesn't change any behaviour. Shared components get translated in the first PR that touches them.A few questions before I start:
Happy to start with the auth and onboarding pages as soon as you give the go-ahead.
helpcodeai commentedon Oct 26, 2026
@sapatmohit thanks, #1248 and #1257 were a pleasure to review. Yes, please keep going.
Accept-Language: en-USmust keep rendering exactly what it renders today, so the Playwright tests stay green.Go ahead with auth and onboarding.