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

package/src/features/store/types/ObjectSchemaEditor.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useRef, useState } from 'react';
 
+import { useUITranslation } from '../../../i18n/index.js';
 import { useUserSession } from '@vertesia/ui/session';
 import { MonacoEditor, EditorApi, SchemaEditor, useSchema } from '@vertesia/ui/widgets';
 import { Button, useToast, useTheme, Panel } from '@vertesia/ui/core';
@@ -13,6 +14,7 @@ interface ObjectSchemaEditorProps {
 }
 export function ObjectSchemaEditor({ objectType, onSchemaUpdate, readonly = false }: ObjectSchemaEditorProps) {
     const { store } = useUserSession();
+    const { t } = useUITranslation();
     const toast = useToast();
     const { theme } = useTheme();
 
@@ -37,14 +39,14 @@ export function ObjectSchemaEditor({ objectType, onSchemaUpdate, readonly = fals
             onSchemaUpdate(schema);
             toast({
                 status: 'success',
-                title: 'Schema updated',
-                description: 'The schema has been updated successfully',
+                title: t('store.schemaUpdated'),
+                description: t('store.schemaUpdatedSuccess'),
                 duration: 2000
             });
         }).catch((err) => {
             toast({
                 status: 'error',
-                title: 'Failed to update schema',
+                title: t('store.failedToUpdateSchema'),
                 description: err.message,
                 duration: 5000
             })
@@ -73,7 +75,7 @@ export function ObjectSchemaEditor({ objectType, onSchemaUpdate, readonly = fals
             } catch (err: any) {
                 toast({
                     status: 'error',
-                    title: 'Invalid JSON Schema',
+                    title: t('store.invalidJsonSchema'),
                     description: err.message,
                     duration: 5000
                 })
@@ -84,11 +86,11 @@ export function ObjectSchemaEditor({ objectType, onSchemaUpdate, readonly = fals
     };
 
     const title = (
-        <div className='flex gap-2 items-center'><div className="text-base font-semibold">Schema Editor</div>
+        <div className='flex gap-2 items-center'><div className="text-base font-semibold">{t('store.schemaEditor')}</div>
             {!readonly && <div>
                 <Button variant="outline" size="sm" onClick={handleOnSave}>
                     {
-                        displayJson ? "Edit Schema" : "Edit Json"
+                        displayJson ? t('store.editSchema') : t('store.editJson')
                     }
                 </Button>
             </div>}
@@ -96,8 +98,8 @@ export function ObjectSchemaEditor({ objectType, onSchemaUpdate, readonly = fals
     );
 
     return (
-        <Panel title={title} className="bg-background! h-[calc(100vh-197px)]"
-            action={!readonly ? <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button> : undefined}
+        <Panel title={title} className="bg-background! h-full"
+        action = {!readonly ? <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>{t('modal.saveChanges')}</Button> : undefined}
         >
             {
                 displayJson
@@ -141,6 +143,6 @@ const validateSchema = (schema: Record<string, any>) => {
         // against the JSON Schema draft that ajv supports by default.
         ajv.compile(schema);
     } catch (error: any) {
-        throw new Error(`Invalid JSON Schema definition: ${error.message}`);
+        throw new Error(`Invalid JSON Schema definition: ${error.message}`, { cause: error });
     }
 };

package/src/features/store/types/SelectContentType.tsx

@@ -2,17 +2,7 @@ import { ContentObjectTypeItem } from "@vertesia/common";
 import { SelectBox } from "@vertesia/ui/core";
 import { useEffect, useState } from "react";
 import { useTypeRegistry } from "./TypeRegistryProvider.js";
-
-const optionLabel = (t: ContentObjectTypeItem | null) => {
-    if (t === null) return 'None';
-
-    return (
-        <div>
-            <div className="text-sm">{t.name}</div>
-            <div className="text-xs text-muted truncate">{t.description}</div>
-        </div>
-    );
-};
+import { useUITranslation } from '../../../i18n/index.js';
 
 interface SelectContentTypeProps {
     defaultValue?: string | string[] | null; // the typeId
@@ -22,8 +12,20 @@ interface SelectContentTypeProps {
     multiple?: boolean;
 }
 export function SelectContentType({ className, defaultValue, onChange, isClearable, multiple}: SelectContentTypeProps) {
+    const { t } = useUITranslation();
     const { registry: typeRegistry } = useTypeRegistry();
     const [isMounted, setIsMounted] = useState(false);
+
+    const optionLabel = (type: ContentObjectTypeItem | null) => {
+        if (type === null) return t('store.none');
+
+        return (
+            <div>
+                <div className="text-sm">{type.name}</div>
+                <div className="text-xs text-muted truncate">{type.description}</div>
+            </div>
+        );
+    };
     const [selectedType, setSelectedType] = useState<ContentObjectTypeItem | undefined>();
     const [selectedTypes, setSelectedTypes] = useState<ContentObjectTypeItem[]>([])
 
@@ -60,7 +62,7 @@ export function SelectContentType({ className, defaultValue, onChange, isClearab
                     options={typeRegistry?.types || []}
                     value={selectedTypes}
                     onChange={_onChangeMultiple}
-                    placeholder="Choose Content Types..."
+                    placeholder={t('store.chooseContentTypes')}
                     optionLabel={optionLabel}
                     className={className || "text-sm bg-background"}
                     filterBy="name"
@@ -77,7 +79,7 @@ export function SelectContentType({ className, defaultValue, onChange, isClearab
                 options={typeRegistry?.types || []}
                 value={selectedType}
                 onChange={_onChange}
-                placeholder="Choose a Content Type..."
+                placeholder={t('store.chooseContentType')}
                 optionLabel={optionLabel}
                 className={className || "text-sm bg-background"}
                 filterBy="name"

package/src/features/store/types/SelectContentTypeModal.tsx

@@ -10,6 +10,7 @@ import {
 } from "@vertesia/ui/core";
 import { ContentObjectTypeItem } from "@vertesia/common";
 import { useTypeRegistry } from "./TypeRegistryProvider.js";
+import { useUITranslation } from '../../../i18n/index.js';
 import { CheckCircleIcon, Info } from "lucide-react";
 
 /**
@@ -44,11 +45,13 @@ interface SelectContentTypeModalProps {
 export function SelectContentTypeModal({
     isOpen,
     onClose,
-    title = "Select Content Type",
+    title,
     children,
     initialSelectedType = null,
     allowNone = true,
 }: SelectContentTypeModalProps) {
+    const { t } = useUITranslation();
+    const resolvedTitle = title ?? t('store.selectContentType');
     const { registry: typeRegistry } = useTypeRegistry();
     const [selectedType, setSelectedType] = useState<ContentObjectTypeItem | null>(initialSelectedType);
 
@@ -72,21 +75,21 @@ export function SelectContentTypeModal({
             onClose={handleClose}
             className="w-full max-w-xl mx-auto"
         >
-            <ModalTitle>{title}</ModalTitle>
+            <ModalTitle>{resolvedTitle}</ModalTitle>
             <ModalBody>
                 {children}
 
                 {/* Type selection */}
                 <div className="mb-4 mt-4">
                     <label className="block text-sm font-medium mb-2">
-                        Content Type {allowNone && <span className="text-gray-500 font-normal">(Optional)</span>}
+                        {t('store.contentType')} {allowNone && <span className="text-gray-500 font-normal">{t('store.optional')}</span>}
                     </label>
                     {allowNone ? (
                         <SelectBox
                             options={types}
                             value={selectedType}
-                            optionLabel={(type) => type ? type.name : 'Select a content type'}
-                            placeholder="Select a content type or leave empty for automatic detection"
+                            optionLabel={(type) => type ? type.name : t('store.selectContentTypeLabel')}
+                            placeholder={t('store.selectContentTypeAuto')}
                             onChange={(selected: ContentObjectTypeItem | null | undefined) => setSelectedType(selected || null)}
                             filterBy="name"
                             isClearable={true}
@@ -95,8 +98,8 @@ export function SelectContentTypeModal({
                         <SelectBox
                             options={types}
                             value={selectedType}
-                            optionLabel={(type) => type ? type.name : 'Select a content type'}
-                            placeholder="Select a content type"
+                            optionLabel={(type) => type ? type.name : t('store.selectContentTypeLabel')}
+                            placeholder={t('store.selectContentTypeLabel')}
                             onChange={(selected: ContentObjectTypeItem | null | undefined) => setSelectedType(selected || null)}
                             filterBy="name"
                         />
@@ -106,9 +109,9 @@ export function SelectContentTypeModal({
                 {!selectedType && (
                     <div className="flex items-center text-attention">
                         <CheckCircleIcon className="size-4 mr-1" />
-                        Automatic Type Detection
+                        {t('store.automaticTypeDetection')}
                         <VTooltip
-                            description="Vertesia will analyze the content and select the most appropriate type. This is recommended for most uploads and ensures optimal processing."
+                            description={t('store.automaticTypeDetectionDescription')}
                             placement="top" size="xs"
                         >
                             <Info className="size-3 ml-2" />
@@ -117,11 +120,11 @@ export function SelectContentTypeModal({
                 )}
             </ModalBody>
             <ModalFooter>
-                <Button variant="ghost" onClick={handleClose} alt="Cancel">
-                    Cancel
+                <Button variant="ghost" onClick={handleClose} alt={t('modal.cancel')}>
+                    {t('modal.cancel')}
                 </Button>
-                <Button onClick={handleConfirm} alt="Confirm selection">
-                    Confirm
+                <Button onClick={handleConfirm} alt={t('store.confirmSelection')}>
+                    {t('modal.confirm')}
                 </Button>
             </ModalFooter>
         </Modal>

package/src/features/store/types/TableLayoutEditor.tsx

@@ -3,6 +3,7 @@ import { ColumnLayout, ContentObjectType } from '@vertesia/common';
 import { Button, useToast, useTheme, Panel } from '@vertesia/ui/core';
 import { useUserSession } from '@vertesia/ui/session';
 import { MonacoEditor, EditorApi } from '@vertesia/ui/widgets';
+import { useUITranslation } from '../../../i18n/index.js';
 
 interface TableLayoutEditorProps {
     objectType: ContentObjectType;
@@ -12,6 +13,7 @@ interface TableLayoutEditorProps {
 export function TableLayoutEditor({ objectType, onLayoutUpdate, readonly = false }: TableLayoutEditorProps) {
     const toast = useToast();
     const { theme } = useTheme();
+    const { t } = useUITranslation();
 
     const [isUpdating, setUpdating] = useState(false);
     const { store } = useUserSession();
@@ -60,15 +62,15 @@ export function TableLayoutEditor({ objectType, onLayoutUpdate, readonly = false
         }).then((response) => {
             toast({
                 status: 'success',
-                title: 'Table Layout updated',
-                description: 'The table layout has been updated successfully',
+                title: t('store.tableLayoutUpdated'),
+                description: t('store.tableLayoutUpdatedDesc'),
                 duration: 2000
             });
             onLayoutUpdate(response.table_layout);
         }).catch((err) => {
             toast({
                 status: 'error',
-                title: 'Failed to update table layout',
+                title: t('store.failedToUpdateTableLayout'),
                 description: err.message,
                 duration: 5000
             })
@@ -79,16 +81,18 @@ export function TableLayoutEditor({ objectType, onLayoutUpdate, readonly = false
 
 
     return (
-        <Panel title="Table Layout Editor" className="bg-background! h-[calc(100vh-197px)]" action={
-            !readonly ? <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button> : undefined
+        <Panel title="Table Layout Editor" className="bg-background! h-full" action={
+            !readonly ? <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>{t('store.saveChanges')}</Button> : undefined
         }>
-            <MonacoEditor
-                value={value}
-                language="json"
-                editorRef={editorRef}
-                theme={theme === 'dark' ? 'vs-dark' : 'vs'}
-                options={{ readOnly: readonly }}
-            />
+            <div className="h-full">
+                <MonacoEditor
+                    value={value}
+                    language="json"
+                    editorRef={editorRef}
+                    theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+                    options={{ readOnly: readonly }}
+                />
+            </div>
         </Panel>
     )
 }

package/src/features/user/UserInfo.tsx

@@ -3,12 +3,24 @@ import { Avatar, Popover, PopoverContent, PopoverTrigger, Table, useFetch } from
 import { useUserSession } from "@vertesia/ui/session";
 import { Users } from "lucide-react";
 import { ReactNode } from "react";
+import { useUITranslation } from '../../i18n/index.js';
 
-//TODO use a real cache
 const USER_CACHE: Record<string, Promise<User>> = {};
 const GROUP_CACHE: Record<string, Promise<UserGroup>> = {};
 const APIKEY_CACHE: Record<string, Promise<ApiKey>> = {};
 
+function cachedFetch<T>(cache: Record<string, Promise<T>>, key: string, fetcher: () => Promise<T>): Promise<T> {
+    let entry = cache[key];
+    if (!entry) {
+        entry = fetcher().catch((err) => {
+            delete cache[key]; // evict on failure so retries work
+            throw err;
+        });
+        cache[key] = entry;
+    }
+    return entry;
+}
+
 /**
  * Fetch the user information given a user reference.
  * The reference has the format: `type:id`. A special reference `system` is used to refer to the system user.
@@ -17,16 +29,7 @@ const APIKEY_CACHE: Record<string, Promise<ApiKey>> = {};
 export function useFetchUserInfo(userId: string) {
     const { client } = useUserSession();
 
-    return useFetch(() => {
-        let user: Promise<User> | undefined = USER_CACHE[userId];
-        if (!user) {
-            user = client.users.retrieve(userId).then(user => {
-                return user;
-            });
-            USER_CACHE[userId] = user;
-        }
-        return user;
-    }, [userId]);
+    return useFetch(() => cachedFetch(USER_CACHE, userId, () => client.users.retrieve(userId)), [userId]);
 }
 
 /**
@@ -36,16 +39,7 @@ export function useFetchUserInfo(userId: string) {
 export function useFetchGroupInfo(groupId: string) {
     const { client } = useUserSession();
 
-    return useFetch(() => {
-        let group: Promise<UserGroup> | undefined = GROUP_CACHE[groupId];
-        if (!group) {
-            group = client.iam.groups.retrieve(groupId).then(group => {
-                return group;
-            });
-            GROUP_CACHE[groupId] = group;
-        }
-        return group;
-    }, [groupId]);
+    return useFetch(() => cachedFetch(GROUP_CACHE, groupId, () => client.iam.groups.retrieve(groupId)), [groupId]);
 }
 
 /**
@@ -55,16 +49,7 @@ export function useFetchGroupInfo(groupId: string) {
 export function useFetchApiKeyInfo(keyId: string) {
     const { client } = useUserSession();
 
-    return useFetch(() => {
-        let apikey: Promise<ApiKey> | undefined = APIKEY_CACHE[keyId];
-        if (!apikey) {
-            apikey = client.apikeys.retrieve(keyId).then(apikey => {
-                return apikey;
-            });
-            APIKEY_CACHE[keyId] = apikey;
-        }
-        return apikey;
-    }, [keyId]);
+    return useFetch(() => cachedFetch(APIKEY_CACHE, keyId, () => client.apikeys.retrieve(keyId)), [keyId]);
 }
 
 function AvatarPlaceholder() {
@@ -77,11 +62,12 @@ interface InfoProps {
 }
 
 function SystemAvatar({ showTitle = false, size = "md" }: InfoProps) {
+    const { t } = useUITranslation();
     return (
-        <UserPopoverPanel title="System User" description="The system user is used to initialize built-in objects.">
+        <UserPopoverPanel title={t('user.systemUser')} description={t('user.systemUserDescription')}>
             <div className="flex gap-2 items-center">
                 <Avatar src="/icon.svg" size={size} />
-                {showTitle && <div className="text-sm font-semibold pl-2">System User</div>}
+                {showTitle && <div className="text-sm font-semibold pl-2">{t('user.systemUser')}</div>}
             </div>
         </UserPopoverPanel>
     )
@@ -90,18 +76,19 @@ interface ServiceInfoProps extends InfoProps {
     accountId: string;
 }
 function ServiceAccountAvatar({ accountId, showTitle = false, size = "md" }: ServiceInfoProps) {
+    const { t } = useUITranslation();
     const description = (
         <>
-            <div>This user is used by robots like workflow workers.</div>
+            <div>{t('user.serviceAccountDescription')}</div>
             <div className="text-gray-800 dark:text-gray-500 text-sm"><span className="font-semibold">ID:</span> {accountId}</div>
         </>
     )
 
     return (
-        <UserPopoverPanel title="Service Account" description={description}>
+        <UserPopoverPanel title={t('user.serviceAccount')} description={description}>
             <div className="flex flex-row items-center gap-2">
                 <Avatar src="/cloud.svg" name="SA" color="bg-amber-500" className="px-[5px] text-white" size={size} />
-                {showTitle && <div className="text-sm font-semibold pl-2 truncate">Service Account : {accountId}</div>}
+                {showTitle && <div className="text-sm font-semibold pl-2 truncate">{t('user.serviceAccount')} : {accountId}</div>}
             </div>
         </UserPopoverPanel>
     );
@@ -114,6 +101,7 @@ interface AgentAvatarProps extends InfoProps {
     isScheduleAgent?: boolean;
 }
 function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false, size = "md", isScheduleAgent = false }: AgentAvatarProps) {
+    const { t } = useUITranslation();
     // Fetch user info - must call hooks unconditionally per React rules
     const shouldFetchUser = onBehalfOfType === 'user' && onBehalfOfId;
     const shouldFetchApiKey = onBehalfOfType === 'apikey' && onBehalfOfId;
@@ -126,8 +114,8 @@ function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false,
     const apiKey = shouldFetchApiKey ? apiKeyResult.data : undefined;
 
     // Determine title and description
-    const title = user ? "Agent on behalf of" : apiKey ? "Agent on behalf of API key" : "Service Account";
-    const _title = isScheduleAgent ? `Schedule ${title}` : title;
+    const title = user ? t('user.agentOnBehalfOf') : apiKey ? t('user.agentOnBehalfOfApiKey') : t('user.serviceAccount');
+    const _title = isScheduleAgent ? t('user.schedule', { title }) : title;
 
     const description = (
         <div className="space-y-2">
@@ -152,7 +140,7 @@ function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false,
             )}
             {!user && !apiKey && (
                 <>
-                    <div>This user is used by robots like workflow workers.</div>
+                    <div>{t('user.serviceAccountDescription')}</div>
                     <div className="text-gray-800 dark:text-gray-500 text-sm">
                         <span className="font-semibold">ID:</span> {agentId}
                     </div>
@@ -222,8 +210,9 @@ interface UserInfoProps extends InfoProps {
     userRef: string | undefined;
 }
 export function UserInfo({ userRef, showTitle = false, size = "md" }: UserInfoProps) {
+    const { t } = useUITranslation();
     if (!userRef) {
-        return <UnknownAvatar title="Unknown User" message="User information is not available." showTitle={showTitle} size={size} />
+        return <UnknownAvatar title={t('user.unknownUser')} message={t('user.unknownUserDescription')} showTitle={showTitle} size={size} />
     }
 
     const parts = userRef.split(':');
@@ -296,7 +285,7 @@ export function UserInfo({ userRef, showTitle = false, size = "md" }: UserInfoPr
             return <ApiKeyAvatar keyId={parts[1]} size={size} showTitle={showTitle} />
 
         default:
-            return <ErrorAvatar title="Unknown User" error={`Invalid user ref type: ${type}`} showTitle={showTitle} size={size} />
+            return <ErrorAvatar title={t('user.unknownUser')} error={`Invalid user ref type: ${type}`} showTitle={showTitle} size={size} />
     }
 }
 
@@ -320,10 +309,11 @@ interface GroupAvatarProps extends InfoProps {
     userId: string;
 }
 function GroupAvatar({ userId, showTitle = false, size = "md" }: GroupAvatarProps) {
+    const { t } = useUITranslation();
     const { data: group, error } = useFetchGroupInfo(userId);
 
     if (error) {
-        return <ErrorAvatar title="Failed to fetch group" error={error} showTitle={showTitle} size={size} />
+        return <ErrorAvatar title={t('user.failedToFetchGroup')} error={error} showTitle={showTitle} size={size} />
     }
 
     if (!group) {
@@ -333,7 +323,7 @@ function GroupAvatar({ userId, showTitle = false, size = "md" }: GroupAvatarProp
     const description = (
         <div className="space-y-1">
             {group.description && <div className="text-sm">{group.description}</div>}
-            <div className="text-xs text-muted-foreground">Group ID: {group.id}</div>
+            <div className="text-xs text-muted-foreground">{t('user.groupId', { id: group.id })}</div>
             {group.tags && group.tags.length > 0 && (
                 <div className="flex flex-wrap gap-1">
                     {group.tags.map(tag => (
@@ -345,10 +335,10 @@ function GroupAvatar({ userId, showTitle = false, size = "md" }: GroupAvatarProp
     )
 
     return (
-        <UserPopoverPanel title={group.name || "Unnamed Group"} description={description}>
+        <UserPopoverPanel title={group.name || t('user.unnamedGroup')} description={description}>
             <div className="flex flex-row items-center gap-2">
                 <Users className="size-6 text-indigo-500" size={size} />
-                {showTitle && <div className="text-sm font-semibold pl-2">{group.name || "Unnamed Group"}</div>}
+                {showTitle && <div className="text-sm font-semibold pl-2">{group.name || t('user.unnamedGroup')}</div>}
             </div>
         </UserPopoverPanel>
     )
@@ -358,10 +348,11 @@ interface UserAvatarProps extends InfoProps {
     userId: string;
 }
 function UserAvatar({ userId, showTitle = false, size = "md" }: UserAvatarProps) {
+    const { t } = useUITranslation();
     const { data: user, error } = useFetchUserInfo(userId);
 
     if (error) {
-        return <ErrorAvatar title="Failed to fetch user" error={error} showTitle={showTitle} size={size} />
+        return <ErrorAvatar title={t('user.failedToFetchUser')} error={error} showTitle={showTitle} size={size} />
     }
 
     if (!user) {
@@ -373,10 +364,10 @@ function UserAvatar({ userId, showTitle = false, size = "md" }: UserAvatarProps)
     )
 
     return (
-        <UserPopoverPanel title={user.name || user.email || user.username || "unknown"} description={description}>
+        <UserPopoverPanel title={user.name || user.email || user.username || t('user.unknown')} description={description}>
             <div className="flex flex-row items-center gap-2">
                 <Avatar src={user.picture} name={user.name} color="bg-indigo-500" size={size} />
-                {showTitle && <div className="text-sm font-semibold pl-2">{user.name || user.email || user.username || "unknown"}</div>}
+                {showTitle && <div className="text-sm font-semibold pl-2">{user.name || user.email || user.username || t('user.unknown')}</div>}
             </div>
         </UserPopoverPanel>
     )
@@ -386,31 +377,31 @@ interface ApiKeyAvatarProps extends InfoProps {
     keyId: string;
 }
 export function ApiKeyAvatar({ keyId, showTitle = false, size = "md" }: ApiKeyAvatarProps) {
-    const { client } = useUserSession();
-    const { data, error } = useFetch<ApiKey>(() => client.apikeys.retrieve(keyId), []);
+    const { t } = useUITranslation();
+    const { data, error } = useFetchApiKeyInfo(keyId);
 
     if (error) {
-        return <ErrorAvatar title="Failed to fetch the apikey" error={error} showTitle={showTitle} size={size} />
+        return <ErrorAvatar title={t('user.failedToFetchApiKey')} error={error} showTitle={showTitle} size={size} />
     }
 
     if (!data) {
         return <AvatarPlaceholder />
     }
 
-    const title = "Private Key";
+    const title = t('user.privateKey');
     const avatar = <Avatar name={"PK"} color="bg-pink-500" size={size} />;
     const description = (
         <Table className="dark:bg-gray-800 dark:text-gray-200 table-fixed w-full">
             <tr>
-                <td className="font-semibold w-20">Key:</td>
+                <td className="font-semibold w-20">{t('user.key')}</td>
                 <td className="truncate max-w-0">{data?.name}</td>
             </tr>
             <tr>
-                <td className="font-semibold w-20">Account:</td>
+                <td className="font-semibold w-20">{t('user.account')}</td>
                 <td className="truncate max-w-0">{data?.account}</td>
             </tr>
             <tr>
-                <td className="font-semibold w-20">Project:</td>
+                <td className="font-semibold w-20">{t('user.project')}</td>
                 <td className="truncate max-w-0">{data?.project.name}</td>
             </tr>
         </Table>
@@ -420,7 +411,7 @@ export function ApiKeyAvatar({ keyId, showTitle = false, size = "md" }: ApiKeyAv
         <UserPopoverPanel title={title} description={description}>
             <div className="flex flex-row items-center gap-2">
                 {avatar}
-                {showTitle && <div className="text-sm font-semibold">{data?.name || data?.account || data?.project.name || "unknown"}</div>}
+                {showTitle && <div className="text-sm font-semibold">{data?.name || data?.account || data?.project.name || t('user.unknown')}</div>}
             </div>
         </UserPopoverPanel >
     )

package/src/i18n/index.tsx

@@ -0,0 +1,45 @@
+import { useEffect, type ReactNode } from 'react';
+import { I18nextProvider, useTranslation } from 'react-i18next';
+import { i18nInstance, NAMESPACE } from './instance.js';
+
+export interface I18nProviderProps {
+    /** Force a specific language. If omitted, uses browser language detection with 'en' fallback. */
+    lng?: string;
+    children: ReactNode;
+}
+
+function detectLanguage(lng?: string): string {
+    return lng ?? navigator.language?.split('-')[0] ?? 'en';
+}
+
+export function I18nProvider({ lng, children }: I18nProviderProps) {
+    // Set language synchronously on first render to avoid flash of wrong language
+    const language = detectLanguage(lng);
+    if (i18nInstance.language !== language) {
+        void i18nInstance.changeLanguage(language);
+    }
+
+    // Also react to prop changes
+    useEffect(() => {
+        const lang = detectLanguage(lng);
+        if (i18nInstance.language !== lang) {
+            void i18nInstance.changeLanguage(lang);
+        }
+    }, [lng]);
+
+    return (
+        <I18nextProvider i18n={i18nInstance}>
+            {children}
+        </I18nextProvider>
+    );
+}
+
+/**
+ * Hook for components inside @vertesia/ui to get translation functions.
+ * Always binds to the 'vertesia.ui' namespace on the scoped instance.
+ */
+export function useUITranslation() {
+    return useTranslation(NAMESPACE, { i18n: i18nInstance });
+}
+
+export { i18nInstance, NAMESPACE } from './instance.js';

package/src/i18n/instance.ts

@@ -0,0 +1,49 @@
+import i18next, { type i18n } from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import ar from './locales/ar.json';
+import de from './locales/de.json';
+import en from './locales/en.json';
+import es from './locales/es.json';
+import fr from './locales/fr.json';
+import it from './locales/it.json';
+import ja from './locales/ja.json';
+import ko from './locales/ko.json';
+import pt from './locales/pt.json';
+import ru from './locales/ru.json';
+import tr from './locales/tr.json';
+import zh from './locales/zh.json';
+import zhTW from './locales/zh-TW.json';
+
+export const NAMESPACE = 'vertesia.ui';
+
+// Scoped instance — does NOT touch the global i18next singleton
+const i18nInstance: i18n = i18next.createInstance();
+
+void i18nInstance.use(initReactI18next).init({
+    resources: {
+        ar: { [NAMESPACE]: ar },
+        de: { [NAMESPACE]: de },
+        en: { [NAMESPACE]: en },
+        es: { [NAMESPACE]: es },
+        fr: { [NAMESPACE]: fr },
+        it: { [NAMESPACE]: it },
+        ja: { [NAMESPACE]: ja },
+        ko: { [NAMESPACE]: ko },
+        pt: { [NAMESPACE]: pt },
+        ru: { [NAMESPACE]: ru },
+        tr: { [NAMESPACE]: tr },
+        zh: { [NAMESPACE]: zh },
+        'zh-TW': { [NAMESPACE]: zhTW },
+    },
+    fallbackLng: 'en',
+    ns: [NAMESPACE],
+    defaultNS: NAMESPACE,
+    interpolation: {
+        escapeValue: false, // React already escapes
+    },
+    react: {
+        useSuspense: false, // Translations are bundled, no async loading
+    },
+});
+
+export { i18nInstance };