configure for full i18n support

web/src/components/config-form/theme/templates/FieldTemplate.tsx

@@ -2,6 +2,15 @@
 import type { FieldTemplateProps } from "@rjsf/utils";
 import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Build the i18n translation key path for nested fields using the field path
+ * provided by RJSF. This avoids ambiguity with underscores in field names.
+ */
+function buildTranslationPath(path: Array<string | number>): string {
+  return path.filter((segment) => typeof segment === "string").join(".");
+}
 
 export function FieldTemplate(props: FieldTemplateProps) {
   const {
@@ -16,8 +25,17 @@ export function FieldTemplate(props: FieldTemplateProps) {
     displayLabel,
     schema,
     uiSchema,
+    registry,
+    fieldPathId,
   } = props;
 
+  // Get i18n namespace from form context (passed through registry)
+  const formContext = registry?.formContext as
+    | Record<string, unknown>
+    | undefined;
+  const i18nNamespace = formContext?.i18nNamespace as string | undefined;
+  const { t } = useTranslation([i18nNamespace || "common"]);
+
   if (hidden) {
     return <div className="hidden">{children}</div>;
   }
@@ -29,6 +47,51 @@ export function FieldTemplate(props: FieldTemplateProps) {
   // Boolean fields (switches) render label inline
   const isBoolean = schema.type === "boolean";
 
+  // Get translation path for this field
+  const translationPath = buildTranslationPath(fieldPathId.path);
+
+  // Use schema title/description as primary source (from JSON Schema)
+  const schemaTitle = (schema as Record<string, unknown>).title as
+    | string
+    | undefined;
+  const schemaDescription = (schema as Record<string, unknown>).description as
+    | string
+    | undefined;
+
+  // Try to get translated label, falling back to schema title, then RJSF label
+  let finalLabel = label;
+  if (i18nNamespace && translationPath) {
+    const translationKey = `${translationPath}.label`;
+    const translatedLabel = t(translationKey, {
+      ns: i18nNamespace,
+      defaultValue: "",
+    });
+    // Only use translation if it's not the key itself (which means translation exists)
+    if (translatedLabel && translatedLabel !== translationKey) {
+      finalLabel = translatedLabel;
+    } else if (schemaTitle) {
+      finalLabel = schemaTitle;
+    }
+  } else if (schemaTitle) {
+    finalLabel = schemaTitle;
+  }
+
+  // Try to get translated description, falling back to schema description
+  let finalDescription = description || "";
+  if (i18nNamespace && translationPath) {
+    const translatedDesc = t(`${translationPath}.description`, {
+      ns: i18nNamespace,
+      defaultValue: "",
+    });
+    if (translatedDesc && translatedDesc !== `${translationPath}.description`) {
+      finalDescription = translatedDesc;
+    } else if (schemaDescription) {
+      finalDescription = schemaDescription;
+    }
+  } else if (schemaDescription) {
+    finalDescription = schemaDescription;
+  }
+
   return (
     <div
       className={cn(
@@ -37,7 +100,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
         isBoolean && "flex items-center justify-between gap-4",
       )}
     >
-      {displayLabel && label && !isBoolean && (
+      {displayLabel && finalLabel && !isBoolean && (
         <Label
           htmlFor={id}
           className={cn(
@@ -45,7 +108,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
             errors && errors.props?.errors?.length > 0 && "text-destructive",
           )}
         >
-          {label}
+          {finalLabel}
           {required && <span className="ml-1 text-destructive">*</span>}
         </Label>
       )}
@@ -53,22 +116,26 @@ export function FieldTemplate(props: FieldTemplateProps) {
       {isBoolean ? (
         <div className="flex w-full items-center justify-between gap-4">
           <div className="space-y-0.5">
-            {displayLabel && label && (
+            {displayLabel && finalLabel && (
               <Label htmlFor={id} className="text-sm font-medium">
-                {label}
+                {finalLabel}
                 {required && <span className="ml-1 text-destructive">*</span>}
               </Label>
             )}
-            {description && (
-              <p className="text-sm text-muted-foreground">{description}</p>
+            {finalDescription && (
+              <p className="max-w-md text-sm text-muted-foreground">
+                {String(finalDescription)}
+              </p>
             )}
           </div>
           {children}
         </div>
       ) : (
         <>
-          {description && (
-            <p className="text-sm text-muted-foreground">{description}</p>
+          {finalDescription && (
+            <p className="text-sm text-muted-foreground">
+              {String(finalDescription)}
+            </p>
           )}
           {children}
         </>

web/src/components/config-form/theme/templates/MultiSchemaFieldTemplate.tsx

@@ -37,4 +37,3 @@ export function MultiSchemaFieldTemplate<
     </>
   );
 }
-