fix: use I18nLabel objects in CRM metadata and resolve via API for spec-aligned i18n

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

apps/console/src/__tests__/AppSidebar.test.tsx

@@ -83,7 +83,21 @@ vi.mock('../hooks/useNavPins', () => ({
 }));
 
 vi.mock('../utils', () => ({
-  resolveI18nLabel: (label: any) => (typeof label === 'string' ? label : label?.en || ''),
+  resolveI18nLabel: (label: any) => {
+    if (typeof label === 'string') return label;
+    if (label && typeof label === 'object') return label.defaultValue || label.key || '';
+    return '';
+  },
+}));
+
+vi.mock('@object-ui/i18n', () => ({
+  useObjectTranslation: () => ({
+    t: (key: string, opts?: any) => opts?.defaultValue ?? key,
+    language: 'en',
+    changeLanguage: vi.fn(),
+    direction: 'ltr',
+    i18n: {},
+  }),
 }));
 
 // Mock @object-ui/components to keep most components but simplify some

apps/console/src/__tests__/app-creation-integration.test.tsx

@@ -235,7 +235,11 @@ vi.mock('../hooks/useNavPins', () => ({
 }));
 
 vi.mock('../utils', () => ({
-  resolveI18nLabel: (label: any) => (typeof label === 'string' ? label : label?.en || ''),
+  resolveI18nLabel: (label: any) => {
+    if (typeof label === 'string') return label;
+    if (label && typeof label === 'object') return label.defaultValue || label.key || '';
+    return '';
+  },
 }));
 
 // Mock i18n

apps/console/src/components/AppSidebar.tsx

@@ -60,6 +60,7 @@ import { useRecentItems } from '../hooks/useRecentItems';
 import { useFavorites } from '../hooks/useFavorites';
 import { useNavPins } from '../hooks/useNavPins';
 import { resolveI18nLabel } from '../utils';
+import { useObjectTranslation } from '@object-ui/i18n';
 
 // ---------------------------------------------------------------------------
 // useNavOrder – localStorage-persisted drag-and-drop reorder for nav items
@@ -155,6 +156,7 @@ export function AppSidebar({ activeAppName, onAppChange }: { activeAppName: stri
   const { isMobile } = useSidebar();
   const { user, signOut } = useAuth();
   const navigate = useNavigate();
+  const { t } = useObjectTranslation();
 
   // Swipe-from-left-edge gesture to open sidebar on mobile
   React.useEffect(() => {
@@ -267,15 +269,15 @@ export function AppSidebar({ activeAppName, onAppChange }: { activeAppName: stri
                     style={primaryColor ? { backgroundColor: primaryColor } : undefined}
                   >
                      {logo ? (
-                       <img src={logo} alt={resolveI18nLabel(activeApp.label)} className="size-6 object-contain" />
+                       <img src={logo} alt={resolveI18nLabel(activeApp.label, t)} className="size-6 object-contain" />
                      ) : (
                        React.createElement(getIcon(activeApp.icon), { className: "size-4" })
                      )}
                   </div>
                   <div className="grid flex-1 text-left text-sm leading-tight">
-                    <span className="truncate font-semibold">{resolveI18nLabel(activeApp.label)}</span>
+                    <span className="truncate font-semibold">{resolveI18nLabel(activeApp.label, t)}</span>
                     <span className="truncate text-xs">
-                      {resolveI18nLabel(activeApp.description) || `${activeApps.length} Apps Available`}
+                      {resolveI18nLabel(activeApp.description, t) || `${activeApps.length} Apps Available`}
                     </span>
                   </div>
                   <ChevronsUpDown className="ml-auto" />

apps/console/src/components/DashboardView.tsx

@@ -30,6 +30,7 @@ import { SkeletonDashboard } from './skeletons';
 import { useMetadata } from '../context/MetadataProvider';
 import { resolveI18nLabel } from '../utils';
 import { useAdapter } from '../context/AdapterProvider';
+import { useObjectTranslation } from '@object-ui/i18n';
 import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
 
 // ---------------------------------------------------------------------------
@@ -130,6 +131,7 @@ export function DashboardView({ dataSource }: { dataSource?: any }) {
   const { dashboardName } = useParams<{ dashboardName: string }>();
   const { showDebug, toggleDebug } = useMetadataInspector();
   const adapter = useAdapter();
+  const { t } = useObjectTranslation();
   const [isLoading, setIsLoading] = useState(true);
   const [configPanelOpen, setConfigPanelOpen] = useState(false);
   const [selectedWidgetId, setSelectedWidgetId] = useState<string | null>(null);
@@ -381,9 +383,9 @@ export function DashboardView({ dataSource }: { dataSource?: any }) {
       {/* ── Header ───────────────────────────────────────────────── */}
       <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0">
         <div className="min-w-0 flex-1">
-          <h1 className="text-lg sm:text-xl md:text-2xl font-bold tracking-tight truncate">{resolveI18nLabel(dashboard.label) || dashboard.name}</h1>
+          <h1 className="text-lg sm:text-xl md:text-2xl font-bold tracking-tight truncate">{resolveI18nLabel(dashboard.label, t) || dashboard.name}</h1>
           {dashboard.description && (
-            <p className="text-sm text-muted-foreground mt-1 line-clamp-2">{resolveI18nLabel(dashboard.description)}</p>
+            <p className="text-sm text-muted-foreground mt-1 line-clamp-2">{resolveI18nLabel(dashboard.description, t)}</p>
           )}
         </div>
         <div className="shrink-0 flex items-center gap-1.5">

apps/console/src/main.tsx

@@ -27,6 +27,20 @@ import '@object-ui/plugin-dashboard';
 import '@object-ui/plugin-report';
 import '@object-ui/plugin-markdown';
 
+/**
+ * Load application-specific translations for a given language from the API.
+ * Falls back gracefully when translations are unavailable.
+ */
+async function loadLanguage(lang: string): Promise<Record<string, unknown>> {
+  try {
+    const res = await fetch(`/api/v1/i18n/${lang}`);
+    if (!res.ok) return {};
+    return await res.json();
+  } catch {
+    return {};
+  }
+}
+
 // Start MSW before rendering the app
 async function bootstrap() {
   // Initialize Mock Service Worker if enabled (lazy-loaded to keep production bundle lean)
@@ -39,7 +53,7 @@ async function bootstrap() {
   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
       <MobileProvider pwa={{ enabled: true, name: 'ObjectUI Console', shortName: 'Console' }}>
-        <I18nProvider>
+        <I18nProvider loadLanguage={loadLanguage}>
           <App />
         </I18nProvider>
       </MobileProvider>

apps/console/src/mocks/browser.ts

@@ -9,6 +9,7 @@
  * This pattern follows @objectstack/studio — see https://github.com/objectstack-ai/spec
  */
 
+import { http, HttpResponse } from 'msw';
 import { ObjectKernel } from '@objectstack/runtime';
 import { InMemoryDriver } from '@objectstack/driver-memory';
 import type { MSWPlugin } from '@objectstack/plugin-msw';
@@ -19,6 +20,22 @@ let kernel: ObjectKernel | null = null;
 let driver: InMemoryDriver | null = null;
 let mswPlugin: MSWPlugin | null = null;
 
+/**
+ * Lazy-load CRM locale bundles for the i18n API endpoint.
+ * Returns a flat translation resource for the given language code.
+ */
+async function loadCrmLocale(lang: string): Promise<Record<string, unknown>> {
+  try {
+    const { crmLocales } = await import('@object-ui/example-crm');
+    const translations = (crmLocales as Record<string, any>)[lang];
+    if (!translations) return {};
+    // Nest under `crm.*` namespace so keys like `crm.navigation.dashboard` resolve
+    return { crm: translations };
+  } catch {
+    return {};
+  }
+}
+
 export async function startMockServer() {
   // Polyfill process.on for ObjectKernel in browser environment
   try {
@@ -42,6 +59,14 @@ export async function startMockServer() {
       enableBrowser: true,
       baseUrl: '/api/v1',
       logRequests: import.meta.env.DEV,
+      customHandlers: [
+        // Serve i18n translation bundles via API
+        http.get('/api/v1/i18n/:lang', async ({ params }) => {
+          const lang = params.lang as string;
+          const resources = await loadCrmLocale(lang);
+          return HttpResponse.json(resources);
+        }),
+      ],
     },
   });
   kernel = result.kernel;

apps/console/src/mocks/server.ts

@@ -9,6 +9,7 @@
  * This pattern follows @objectstack/studio — see https://github.com/objectstack-ai/spec
  */
 
+import { http, HttpResponse } from 'msw';
 import { ObjectKernel } from '@objectstack/runtime';
 import { InMemoryDriver } from '@objectstack/driver-memory';
 import { setupServer } from 'msw/node';
@@ -21,6 +22,20 @@ let driver: InMemoryDriver | null = null;
 let mswPlugin: MSWPlugin | null = null;
 let server: ReturnType<typeof setupServer> | null = null;
 
+/**
+ * Lazy-load CRM locale bundles for the i18n API endpoint.
+ */
+async function loadCrmLocale(lang: string): Promise<Record<string, unknown>> {
+  try {
+    const { crmLocales } = await import('@object-ui/example-crm');
+    const translations = (crmLocales as Record<string, any>)[lang];
+    if (!translations) return {};
+    return { crm: translations };
+  } catch {
+    return {};
+  }
+}
+
 export async function startMockServer() {
   if (kernel) {
     console.log('[MSW] ObjectStack Runtime already initialized');
@@ -35,6 +50,13 @@ export async function startMockServer() {
       enableBrowser: false,
       baseUrl: '/api/v1',
       logRequests: false,
+      customHandlers: [
+        http.get('/api/v1/i18n/:lang', async ({ params }) => {
+          const lang = params.lang as string;
+          const resources = await loadCrmLocale(lang);
+          return HttpResponse.json(resources);
+        }),
+      ],
     },
   });
   kernel = result.kernel;

apps/console/src/utils.ts

@@ -5,11 +5,19 @@
 /**
  * Resolves an I18nLabel to a plain string.
  * I18nLabel can be either a string or an object { key, defaultValue?, params? }.
- * When it's an object, we return the defaultValue or the key as fallback.
+ * When it's an object and a `t` function is provided, it resolves the key
+ * through the i18n translation system. Otherwise returns defaultValue or key.
  */
-export function resolveI18nLabel(label: string | { key: string; defaultValue?: string; params?: Record<string, any> } | undefined): string | undefined {
+export function resolveI18nLabel(
+  label: string | { key: string; defaultValue?: string; params?: Record<string, any> } | undefined,
+  t?: (key: string, options?: any) => string,
+): string | undefined {
   if (label === undefined || label === null) return undefined;
   if (typeof label === 'string') return label;
+  if (t) {
+    const result = t(label.key, { defaultValue: label.defaultValue, ...label.params });
+    if (result && result !== label.key) return result;
+  }
   return label.defaultValue || label.key;
 }
 

examples/crm/src/__tests__/crm-metadata.test.ts

@@ -1,5 +1,12 @@
 import { describe, it, expect } from 'vitest';
 
+/** Resolve an I18nLabel (string or { key, defaultValue }) to a plain string for test assertions */
+function resolveTitle(title: string | { key: string; defaultValue?: string } | undefined): string {
+  if (!title) return '';
+  if (typeof title === 'string') return title;
+  return title.defaultValue || title.key;
+}
+
 // --- Metadata imports ---
 import { AccountObject } from '../objects/account.object';
 import { ContactObject } from '../objects/contact.object';
@@ -235,7 +242,7 @@ describe('CRM Metadata Spec Compliance', () => {
     });
 
     it('all widgets have unique title', () => {
-      const titles = CrmDashboard.widgets.map((w) => w.title);
+      const titles = CrmDashboard.widgets.map((w) => resolveTitle(w.title));
       for (const title of titles) {
         expect(typeof title).toBe('string');
         expect(title!.length).toBeGreaterThan(0);
@@ -245,16 +252,17 @@ describe('CRM Metadata Spec Compliance', () => {
 
     it('all widgets have title', () => {
       for (const widget of CrmDashboard.widgets) {
-        expect(typeof widget.title).toBe('string');
-        expect(widget.title!.length).toBeGreaterThan(0);
+        const title = resolveTitle(widget.title);
+        expect(typeof title).toBe('string');
+        expect(title!.length).toBeGreaterThan(0);
       }
     });
 
     it('metric widgets have title matching options.label', () => {
       const metrics = CrmDashboard.widgets.filter((w) => w.type === 'metric');
       for (const widget of metrics) {
         const opts = widget.options as { label?: string };
-        expect(widget.title).toBe(opts.label);
+        expect(resolveTitle(widget.title)).toBe(opts.label);
       }
     });