@vertesia/ui 1.0.0-dev.20260305.083323Z → 1.0.0

package/src/shell/login/InviteAcceptModal.tsx

@@ -2,12 +2,14 @@ import { TransientToken, UserInviteTokenData } from "@vertesia/common"
 import { Button, Modal, ModalBody, ModalTitle } from "@vertesia/ui/core"
 import { useEffect, useState } from "react"
 import { useUserSession } from "@vertesia/ui/session"
+import { useUITranslation } from '../../i18n/index.js'
 
 
 export function InviteAcceptModal() {
 
     const session = useUserSession()
     const { client, account } = session;
+    const { t } = useUITranslation()
     const [showModal, setShowModal] = useState(false)
     const [invites, setInvites] = useState<TransientToken<UserInviteTokenData>[]>([])
 
@@ -38,6 +40,7 @@ export function InviteAcceptModal() {
     const accept = async (invite: TransientToken<UserInviteTokenData>) => {
         await client.account.acceptInvite(invite.id);
         await session.fetchAccounts();
+        await session.fetchProjects(invite.data.account.id);
         const remainingInvites = invites.filter(i => i.id !== invite.id)
 
         const notLegacyInvites = remainingInvites.filter(i => i.data.account);
@@ -71,7 +74,7 @@ export function InviteAcceptModal() {
                 {invite.data.invited_by &&<div className="text-xs">by {invite.data.invited_by.name ?? invite.data.invited_by}</div>}
             </div>
             <div className="flex flex-col gap-4">
-                <Button size={'xs'} onClick={() => accept(invite)}>Accept</Button> <Button size={'xs'} variant="secondary" onClick={() => reject(invite)}>Reject</Button>
+                <Button size={'xs'} onClick={() => accept(invite)}>{t('login.accept')}</Button> <Button size={'xs'} variant="secondary" onClick={() => reject(invite)}>{t('login.reject')}</Button>
             </div>
         </div>)
     })
@@ -79,7 +82,7 @@ export function InviteAcceptModal() {
     return (
         <div>
             <Modal isOpen={showModal} onClose={closeModal}>
-                <ModalTitle>Review Invites</ModalTitle>
+                <ModalTitle>{t('login.reviewInvites')}</ModalTitle>
                 <ModalBody>
                     <div className="text-sm pb-4">
                         You have received the following invites to join other accounts.

package/src/shell/login/MicrosoftSigninButton.tsx

@@ -1,18 +1,16 @@
 import { OAuthProvider, signInWithRedirect } from "firebase/auth";
 import { getFirebaseAuth } from "@vertesia/ui/session";
 import { Button } from "@vertesia/ui/core";
+import { useUITranslation } from "@vertesia/ui/i18n";
 
 interface GoogleSignInButtonProps {
     redirectTo?: string;
 }
-export default function MicrosoftSignInButton({ redirectTo }: GoogleSignInButtonProps) {
+export default function MicrosoftSignInButton({ redirectTo: _redirectTo }: GoogleSignInButtonProps) {
+    const { t } = useUITranslation();
 
     const signIn = () => {
         localStorage.removeItem("tenantName");
-        let redirectPath = redirectTo || window.location.pathname || '/';
-        if (redirectPath[0] !== '/') {
-            redirectPath = '/' + redirectPath;
-        }
         const provider = new OAuthProvider('microsoft.com');
         provider.addScope('profile');
         provider.addScope('email');
@@ -24,7 +22,7 @@ export default function MicrosoftSignInButton({ redirectTo }: GoogleSignInButton
             onClick={signIn}
             className="w-full py-5 flex rounded-lg hover:shadow-sm transition duration-150 text-center">
             <img className="size-6" src="https://learn.microsoft.com/en-us/entra/identity-platform/media/howto-add-branding-in-apps/ms-symbollockup_mssymbol_19.svg" loading="lazy" alt="microsoft logo" />
-            <span className="text-sm font-semibold">Continue with Microsoft</span>
+            <span className="text-sm font-semibold">{t('auth.continueWithMicrosoft')}</span>
         </Button>
     );
 }

package/src/shell/login/SigninScreen.tsx

@@ -1,7 +1,9 @@
 import { SignupData, SignupPayload } from "@vertesia/common";
 import { Button, useSafeLayoutEffect } from "@vertesia/ui/core";
 import { Env } from "@vertesia/ui/env";
+import { useUITranslation } from "@vertesia/ui/i18n";
 import { UserNotFoundError, useUserSession, useUXTracking } from "@vertesia/ui/session";
+import { RegionTag } from "@vertesia/ui/layout";
 import clsx from "clsx";
 import { useEffect, useState } from "react";
 import EnterpriseSigninButton from "./EnterpriseSigninButton";
@@ -25,6 +27,7 @@ export function SigninScreen({ allowedPrefix, isNested = false, lightLogo, darkL
 }
 
 function SigninScreenImpl({ isNested = false, lightLogo, darkLogo }: SigninScreenProps) {
+    const { t } = useUITranslation();
     const { isLoading, user, authError } = useUserSession();
 
     return !isLoading && !user ? (
@@ -39,13 +42,14 @@ function SigninScreenImpl({ isNested = false, lightLogo, darkLogo }: SigninScree
             >
 
                 <StandardSigninPanel authError={authError} lightLogo={lightLogo} darkLogo={darkLogo} />
-                <div className="flex gap-x-6 mt-10 justify-center text-muted">
+                <div className="flex gap-x-6 mt-10 justify-center items-center text-muted">
                     <a href="https://vertesiahq.com/privacy" className="text-sm">
-                        Privacy Policy
+                        {t('auth.privacyPolicy')}
                     </a>
                     <a href="https://vertesiahq.com/terms" className="text-sm">
-                        Terms of Service
+                        {t('auth.termsOfService')}
                     </a>
+                    <RegionTag />
                 </div>
             </div>
         </div>
@@ -57,6 +61,7 @@ function StandardSigninPanel({ authError, darkLogo, lightLogo }: {
     darkLogo?: string,
     lightLogo?: string
 }) {
+    const { t } = useUITranslation();
     const [signupData, setSignupData] = useState<SignupData | undefined>(undefined);
     const [collectSignupData, setCollectSignupData] = useState(false);
     const { signOut } = useUserSession();
@@ -109,8 +114,8 @@ function StandardSigninPanel({ authError, darkLogo, lightLogo }: {
 
             {signupData && (
                 <div className="my-6">
-                    Need to make a change?{" "}
-                    <Button onClick={goToSignup}> Go back</Button>
+                    {t('auth.needToMakeChange')}{" "}
+                    <Button onClick={goToSignup}> {t('auth.goBack')}</Button>
                 </div>
             )}
             <div className="flex flex-col space-y-2">
@@ -120,12 +125,12 @@ function StandardSigninPanel({ authError, darkLogo, lightLogo }: {
 
                     <div className="flex flex-col">
                         <div className="my-4">
-                            <h2 className="text-2xl font-bold text-center">Log in or Sign up</h2>
+                            <h2 className="text-2xl font-bold text-center">{t('auth.logInOrSignUp')}</h2>
                         </div>
                         <div className="max-w-2xl text-center my-2 px-2">
-                            First time here? No problem, it&apos;s free to try!
+                            {t('auth.firstTimeMessage')}
                             <br />
-                            We&apos;ll just ask you a couple of questions next and you&apos;ll be on your way.
+                            {t('auth.firstTimeDetails')}
                         </div>
                         <div className="flex items-center flex-col">
                             <div className="py-4 w-70">
@@ -135,7 +140,7 @@ function StandardSigninPanel({ authError, darkLogo, lightLogo }: {
                             </div>
                             <div className="flex items-center flex-row w-70 text-muted">
                                 <hr className="w-full" />
-                                <div className="px-2 text-xs">OR</div>
+                                <div className="px-2 text-xs">{t('auth.or')}</div>
                                 <hr className="w-full" />
                             </div>
                             <div className="py-4 w-70">
@@ -145,12 +150,12 @@ function StandardSigninPanel({ authError, darkLogo, lightLogo }: {
                         {authError && !(authError instanceof UserNotFoundError) && (
                             <div className="text-center">
                                 <div className="">
-                                    Sorry, we have not been able to sign you in.
+                                    {t('auth.signInError')}
                                     <br />
-                                    Please try again or contact
+                                    {t('auth.signInErrorContact')}
                                     <a className='text-info mx-1' href="mailto:support@vertesiahq.com">support@vertesiahq.com</a>
-                                    if it persists.
-                                    <pre className="mt-2">Error: {authError.message}</pre>
+                                    {t('auth.signInErrorPersists')}
+                                    <pre className="mt-2">{t('auth.error', { message: authError.message })}</pre>
                                 </div>
                             </div>
                         )}

package/src/shell/login/SignupForm.tsx

@@ -1,8 +1,9 @@
 import { SignupData } from "@vertesia/common";
-import { Button, Input, SelectBox, SelectStack } from "@vertesia/ui/core";
+import { Button, Input, RadioGroup, SelectBox } from "@vertesia/ui/core";
 import { User } from "firebase/auth";
 import { useEffect, useState } from "react";
 import { getFirebaseAuth } from "@vertesia/ui/session";
+import { useUITranslation } from '../../i18n/index.js';
 
 
 interface CompanySizeOption {
@@ -10,41 +11,13 @@ interface CompanySizeOption {
     label: string;
 }
 
-const companySizeOptions: CompanySizeOption[] = [
-    { id: 1, label: "1-10 employees" },
-    { id: 11, label: "11-100 employees" },
-    { id: 101, label: "101-1000 employees" },
-    { id: 1001, label: "1001-5000 employees" },
-    { id: 5001, label: "5000+ employees" },
-];
-
-const accountTypeOptions = [
-    {
-        id: "personal",
-        label: "Personal",
-        description: "For personal use, or for a small team.",
-    },
-    {
-        id: "company",
-        label: "Company",
-        description: "For a company or organization.",
-    },
-];
-
-const projectMaturityOptions = [
-    { id: "testing", label: "Just Testing or Evaluating LLMs" },
-    { id: "exploring", label: "Actively Exploring LLMs on a Project" },
-    { id: "using", label: "Already Using LLMs in Production" },
-    { id: "migrating", label: "Migrating to different LLMs" },
-    { id: "other", label: "Other" },
-];
-
 interface SignupFormProps {
     onSignup: (data: SignupData, fbToken: string) => void;
     goBack: () => void;
 }
 
 export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
+    const { t } = useUITranslation();
     const [accountType, setAccountType] = useState<string | undefined>(undefined);
     const [companySize, setCompanySize] = useState<CompanySizeOption | undefined>(undefined);
     const [companyName, setCompanyName] = useState<string | undefined>(undefined);
@@ -55,6 +28,35 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
     const [error, setError] = useState<string | undefined>(undefined);
     const isCompany = accountType === "company";
 
+    const companySizeOptions: CompanySizeOption[] = [
+        { id: 1, label: t('signup.size1to10') },
+        { id: 11, label: t('signup.size11to100') },
+        { id: 101, label: t('signup.size101to1000') },
+        { id: 1001, label: t('signup.size1001to5000') },
+        { id: 5001, label: t('signup.size5000plus') },
+    ];
+
+    const accountTypeOptions = [
+        {
+            id: "personal",
+            label: t('signup.personal'),
+            description: t('signup.personalDescription'),
+        },
+        {
+            id: "company",
+            label: t('signup.company'),
+            description: t('signup.companyDescription'),
+        },
+    ];
+
+    const projectMaturityOptions = [
+        { id: "testing", label: t('signup.justTesting') },
+        { id: "exploring", label: t('signup.activelyExploring') },
+        { id: "using", label: t('signup.alreadyUsing') },
+        { id: "migrating", label: t('signup.migratingLLMs') },
+        { id: "other", label: t('signup.other') },
+    ];
+
     useEffect(() => {
         const user = getFirebaseAuth().currentUser;
         if (!user) {
@@ -66,16 +68,16 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
 
     const isValid = () => {
         if (!accountType) {
-            setError("Please select an account type");
+            setError(t('signup.pleaseSelectAccountType'));
             return false;
         }
         if (isCompany && !companyName) {
-            setError("Please enter an organization name");
+            setError(t('signup.pleaseEnterOrgName'));
             return false;
         }
 
         if (isCompany && !companySize) {
-            setError("Please select a company size");
+            setError(t('signup.pleaseSelectCompanySize'));
             return false;
         }
 
@@ -112,16 +114,14 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
         <div className="flex flex-col space-y-2">
             <div className="prose">
                 <p className="prose text-sm text-muted pt-4">
-                    Welcome to Vertesia, {fbUser?.displayName} ({fbUser?.email}).
-                    Please tell us a little bit about yourself and you&apos;ll be on your way.
-                    No credit card is required.
+                    {t('signup.welcomeMessage', { name: fbUser?.displayName, email: fbUser?.email })}
                 </p>
                 {error &&
                     <div className="text-destructive">{error}</div>
                 }
             </div>
-            <FormItem label="Account Type">
-                <SelectStack
+            <FormItem label={t('signup.accountType')}>
+                <RadioGroup
                     options={accountTypeOptions}
                     selected={accountTypeOptions.find((option) => option.id === accountType)}
                     onSelect={(option) => setAccountType(option.id)}
@@ -129,38 +129,38 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
             </FormItem>
             {isCompany &&
                 <>
-                    <FormItem label="Company Size">
+                    <FormItem label={t('signup.companySize')}>
                         <SelectBox className="w-full border border-accent bg-muted"
                             value={companySize}
                             options={companySizeOptions}
                             onChange={setCompanySize}
                             optionLabel={(option) => option?.label}
-                            placeholder='Select Company Size'
+                            placeholder={t('signup.selectCompanySize')}
                         />
                     </FormItem>
-                    <FormItem label="Company Name">
+                    <FormItem label={t('signup.companyName')}>
                         <Input value={companyName} onChange={setCompanyName} type="text" required={true} />
                     </FormItem>
-                    <FormItem label="Company Website">
+                    <FormItem label={t('signup.companyWebsite')}>
                         <Input value={companyWebsite} onChange={setCompanyWebsite} type="text" />
                     </FormItem>
                 </>
             }
-            <FormItem label="Project Maturity">
+            <FormItem label={t('signup.projectMaturity')}>
                 <SelectBox className="w-full border border-accent bg-muted"
                     options={projectMaturityOptions}
                     value={projectMaturityOptions.find((option) => option.id === projectMaturity)}
                     optionLabel={(option) => option?.label}
-                    placeholder='Select Project Maturity'
+                    placeholder={t('signup.selectProjectMaturity')}
                     onChange={(option) => setProjectMaturity(option?.id)}
                 />
             </FormItem>
             <div className="pt-8 flex flex-col">
                 <Button variant="primary" onClick={onSubmit} size="xl">
-                    <span className="text-lg">Sign Up</span>
+                    <span className="text-lg">{t('signup.signUp')}</span>
                 </Button>
                 <Button variant="ghost" size="xl" className="mt-4" onClick={goBack}>
-                    <span className="">Wrong account, go back</span>
+                    <span className="">{t('signup.wrongAccountGoBack')}</span>
                 </Button>
             </div>
         </div>

package/src/shell/login/TerminalLogin.tsx

@@ -4,6 +4,7 @@ import { Env } from "@vertesia/ui/env"
 import { useLocation } from "@vertesia/ui/router"
 import { fetchComposableTokenFromFirebaseToken, useUserSession } from '@vertesia/ui/session'
 import { useState } from 'react'
+import { useUITranslation } from '../../i18n/index.js'
 
 interface ProfileData {
     profile?: string
@@ -81,13 +82,14 @@ export function TerminalLogin() {
     const location = useLocation()
     const clientInfo = getClientInfo(location)
     const toast = useToast()
+    const { t } = useUITranslation()
 
     const onAccept = async (data: ProfileData) => {
         if (!clientInfo) return
         if (!data.profile) {
             toast({
-                title: 'Profile is required',
-                description: 'Please enter a profile name to save the client authorization',
+                title: t('login.terminal.profileRequired'),
+                description: t('login.terminal.profileRequiredDesc'),
                 status: 'error',
                 duration: 2000
             })
@@ -95,8 +97,8 @@ export function TerminalLogin() {
         }
         if (!data.account) {
             toast({
-                title: 'Account is required',
-                description: 'Please select an account to authorize the client to access the ComposablePrompts servers',
+                title: t('login.terminal.accountRequired'),
+                description: t('login.terminal.accountRequiredDesc'),
                 status: 'error',
                 duration: 2000
             })
@@ -104,8 +106,8 @@ export function TerminalLogin() {
         }
         if (!data.project) {
             toast({
-                title: 'Project is required',
-                description: 'Please select a project to authorize the client to access the ComposablePrompts servers',
+                title: t('login.terminal.projectRequired'),
+                description: t('login.terminal.projectRequiredDesc'),
                 status: 'error',
                 duration: 2000
             })
@@ -133,7 +135,7 @@ export function TerminalLogin() {
                 setPayload(payload)
             } else {
                 toast({
-                    title: 'Failed to get composable token',
+                    title: t('login.terminal.failedToGetToken'),
                     status: 'error',
                     duration: 5000
                 })
@@ -144,7 +146,7 @@ export function TerminalLogin() {
                 setPayload(payload)
             } else {
                 toast({
-                    title: 'Error authorizing client',
+                    title: t('login.terminal.errorAuthorizingClient'),
                     description: err.message,
                     status: 'error',
                     duration: 5000
@@ -155,7 +157,7 @@ export function TerminalLogin() {
 
     const getPageContent = () => {
         if (!clientInfo) {
-            return <ErrorBox title='Invalid request'>This page should be called by a terminal client to authenticate against the ComposablePrompts servers</ErrorBox>
+            return <ErrorBox title={t('login.terminal.invalidRequest')}>{t('login.terminal.invalidRequestDesc')}</ErrorBox>
         }
 
         return payload
@@ -177,19 +179,19 @@ interface AuthAcceptScreenProps {
 function AuthAcceptScreen({ onAccept, clientInfo }: Readonly<AuthAcceptScreenProps>) {
     const { client, user } = useUserSession()
     const { data: allProjects, error } = useFetch(() => user ? client.projects.list() : Promise.resolve([]), [user])
-
+    const { t } = useUITranslation()
 
     if (error) {
-        return <ErrorBox title='Error loading projects'>{error.message}</ErrorBox>
+        return <ErrorBox title={t('login.terminal.errorLoadingProjects')}>{error.message}</ErrorBox>
     }
 
     const getEnvironmentName = () => {
         if (Env.isLocalDev) {
-            return "Local Dev"
+            return t('login.terminal.envLocalDev')
         } else if (Env.isDev) {
-            return "Staging"
+            return t('login.terminal.envStaging')
         }
-        return "Production"
+        return t('login.terminal.envProduction')
     }
 
     const envName = getEnvironmentName()
@@ -201,12 +203,12 @@ function AuthAcceptScreen({ onAccept, clientInfo }: Readonly<AuthAcceptScreenPro
                     Authorizing client on {envName} environment.
                 </div>
                 <div className='mb-2 text-md text-muted-foreground'>
-                    <div>A client app wants authorization to access the composable prompt servers in your name.</div>
+                    <div>{t('login.terminal.clientWantsAuth')}</div>
                     <div>The client app code is <b className="text-foreground">{clientInfo.code}</b>. You can check if the code is correct in the terminal.</div>
                 </div>
                 <div className='mb-2 text-sm text-muted-foreground'>
-                    <div>You must choose the target account and project for the client to access.</div>
-                    <div>Also, enter a profile name that will be used to save the authorization in your client configuration.</div>
+                    <div>{t('login.terminal.chooseAccountProject')}</div>
+                    <div>{t('login.terminal.profileNameNote')}</div>
                 </div>
             </div>
             <ProfileForm onAccept={onAccept} allProjects={allProjects} data={clientInfo} />
@@ -216,12 +218,13 @@ function AuthAcceptScreen({ onAccept, clientInfo }: Readonly<AuthAcceptScreenPro
 
 function AuthDoneScreen({ payload, error }: Readonly<{ payload: LoginResult, error?: Error }>) {
     const toast = useToast()
+    const { t } = useUITranslation()
     const onCopy = () => {
         if (payload) {
             navigator.clipboard.writeText(JSON.stringify(payload))
             toast({
-                title: 'Authentication Payload copied',
-                description: error ? 'You can paste the authentication payload in the terminal to authenticate the client.' : 'You can close the page now.',
+                title: t('login.terminal.authPayloadCopied'),
+                description: error ? t('login.terminal.authPayloadCopiedWithError', { error: error.message }) : t('login.terminal.authPayloadCopiedSuccess'),
                 status: 'success',
                 duration: 5000
             })
@@ -233,14 +236,12 @@ function AuthDoneScreen({ payload, error }: Readonly<{ payload: LoginResult, err
             {
                 error ?
                     <div>
-                        <ErrorBox title='Failed to send the authorization token to the cli tool'>This can happen due to security checks on Safari. The error is &quot;{error.message}&quot;</ErrorBox>
-                        <div>Don&apos;t worry, you can still authenticate the cli tool by pasting the authentication token in the terminal.
-                            You can close this page.</div>
+                        <ErrorBox title={t('login.terminal.failedToSendToken')}>{t('login.terminal.failedToSendTokenDesc', { error: error.message })}</ErrorBox>
                     </div>
-                    : <div>The client is authenticated. You can close this page.</div>
+                    : <div>{t('login.terminal.clientAuthenticated')}</div>
             }
             <Center className="mt-4">
-                <Button variant='secondary' onClick={onCopy}>Copy the Authentication Payload</Button>
+                <Button variant='secondary' onClick={onCopy}>{t('login.terminal.copyAuthPayload')}</Button>
             </Center>
         </div>
     )
@@ -253,6 +254,7 @@ interface ProfileFormProps {
 }
 function ProfileForm({ allProjects, data, onAccept }: Readonly<ProfileFormProps>) {
     const { accounts, account, project } = useUserSession()
+    const { t } = useUITranslation()
     const [currentData, setCurrentData] = useState<ProfileData>(() => ({
         profile: data.profile,
         account: data.account ?? account?.id,
@@ -276,22 +278,22 @@ function ProfileForm({ allProjects, data, onAccept }: Readonly<ProfileFormProps>
     return (
         <div className='w-1/3'>
             <div className="mb-4 flex flex-col gap-2">
-                <span className="font-semibold text-muted-foreground">Profile Name</span>
+                <span className="font-semibold text-muted-foreground">{t('login.terminal.profileName')}</span>
                 <Input type='text' value={currentData.profile} onChange={onChangeProfile} />
             </div>
             <div className="mb-4 flex flex-col gap-2">
-                <span className="font-semibold text-muted-foreground">Account</span>
+                <span className="font-semibold text-muted-foreground">{t('login.terminal.account')}</span>
                 <SelectAccount value={currentData.account} onChange={onChangeAccount} accounts={accounts || []} />
             </div>
             <div className="mb-4 flex flex-col gap-2">
-                <span className="font-semibold text-muted-foreground">Project</span>
+                <span className="font-semibold text-muted-foreground">{t('login.terminal.project')}</span>
                 <SelectProject value={currentData.project} onChange={onChangeProject} projects={projects} />
             </div>
             <div className='mb-4 text-sm text-attention'>
-                <b>Note:</b> If your browser asks for permission to access your local network, please allow it. This is required to send the authorization token back to the CLI tool. If not, you will need to copy/paste the token manually in your terminal.
+                {t('login.terminal.browserPermissionNote')}
             </div>
             <div>
-                <Button size='xl' onClick={() => onAccept(currentData)}>Authorize Client</Button>
+                <Button size='xl' onClick={() => onAccept(currentData)}>{t('login.terminal.authorizeClient')}</Button>
             </div>
         </div>
     )
@@ -303,6 +305,7 @@ interface SelectAccountProps {
     onChange: (value: AccountRef) => void
 }
 function SelectAccount({ value, accounts, onChange }: Readonly<SelectAccountProps>) {
+    const { t } = useUITranslation()
     const _onChange = (value: AccountRef) => {
         onChange(value)
     }
@@ -312,7 +315,7 @@ function SelectAccount({ value, accounts, onChange }: Readonly<SelectAccountProp
         onChange={_onChange}
         by="id"
         optionLabel={(option) => option.name}
-        placeholder='Select Account'
+        placeholder={t('login.terminal.selectAccount')}
     />
 }
 
@@ -322,6 +325,7 @@ interface SelectProjectProps {
     onChange: (value: ProjectRef) => void
 }
 function SelectProject({ value, projects, onChange }: Readonly<SelectProjectProps>) {
+    const { t } = useUITranslation()
     const _onChange = (value: ProjectRef) => {
         onChange(value)
     }
@@ -331,7 +335,7 @@ function SelectProject({ value, projects, onChange }: Readonly<SelectProjectProp
             value={projects.find(p => p.id === value)}
             options={projects}
             optionLabel={(option) => option.name}
-            placeholder='Select Project'
+            placeholder={t('login.terminal.selectProject')}
             onChange={_onChange} />
     )
 }

package/src/shell/login/UserInfo.tsx

@@ -5,6 +5,7 @@ import { useUserSession } from "@vertesia/ui/session";
 // Package version is now passed as prop from the consuming application
 import { Check, CopyIcon } from "lucide-react";
 import { useState } from "react";
+import { useUITranslation } from '../../i18n/index.js';
 
 export function InfoItems({ title, value }: { title: string, value: string }) {
     function copyToClipboard(value: string) {
@@ -32,6 +33,7 @@ export function InfoItems({ title, value }: { title: string, value: string }) {
 }
 
 export default function InfoList() {
+    const { t } = useUITranslation();
 
     const session = useUserSession();
     const { account, project, client, authToken } = session;
@@ -42,27 +44,27 @@ export default function InfoList() {
     const tabs = [
         {
             name: 'user',
-            label: 'User',
+            label: t('user.user'),
             content:
                 <div className="space-y-1 p-2">
-                    <InfoItems title="Organization ID" value={account?.id ?? 'Unknown'} />
-                    <InfoItems title="Project ID" value={project?.id ?? 'Unknown'} />
-                    <InfoItems title="User ID" value={authToken?.sub ?? 'Unknown'} />
-                    <InfoItems title="Organization Roles" value={authToken?.account_roles?.join(',') ?? 'Unknown'} />
-                    <InfoItems title="Project Roles" value={authToken?.project_roles?.join(',') ?? 'Unknown'} />
+                    <InfoItems title={t('user.organizationId')} value={account?.id ?? t('user.unknown')} />
+                    <InfoItems title={t('user.projectId')} value={project?.id ?? t('user.unknown')} />
+                    <InfoItems title={t('user.userId')} value={authToken?.sub ?? t('user.unknown')} />
+                    <InfoItems title={t('user.organizationRoles')} value={authToken?.account_roles?.join(',') ?? t('user.unknown')} />
+                    <InfoItems title={t('user.projectRoles')} value={authToken?.project_roles?.join(',') ?? t('user.unknown')} />
                 </div>
         },
         {
             name: 'environment',
-            label: 'Environment',
+            label: t('user.environment'),
             content:
                 <div className="space-y-1 p-2">
-                    <InfoItems title="Tenant ID" value={tenantId} />
-                    <InfoItems title="Environment" value={Env.type} />
-                    <InfoItems title="Server" value={server} />
-                    <InfoItems title="Store" value={store} />
-                    <InfoItems title="App Version" value={Env.version} />
-                    <InfoItems title="SDK Version" value={Env.sdkVersion || 'unknown'} />
+                    <InfoItems title={t('user.tenantId')} value={tenantId} />
+                    <InfoItems title={t('user.environment')} value={Env.type} />
+                    <InfoItems title={t('user.server')} value={server} />
+                    <InfoItems title={t('user.store')} value={store} />
+                    <InfoItems title={t('user.appVersion')} value={Env.version} />
+                    <InfoItems title={t('user.sdkVersion')} value={Env.sdkVersion || t('user.unknown')} />
                 </div>
         }
     ];