fix: Add explicit String() coercion to prevent any undefined rendering

This commit adds bulletproof String() coercion to ALL translation
functions to ensure no undefined value can ever be rendered, even
in production minified builds.

Root Cause:
The user is running production/minified React build where debug logs
are stripped out. We need runtime protection that survives minification.

Changes Made:

1. **All translate functions now use String() coercion**:
   - translatePOReasonng: String(result || fallback)
   - translateBatchReasoning: String(result || fallback)
   - translateConsequence: String(result || '')
   - translateSeverity: String(result || '')
   - translateTrigger: String(result || '')
   - translateError: String(result || errorCode)

2. **formatPOAction with explicit String() on every property**:
   - reasoning: String(translate...() || 'Purchase order required')
   - consequence: String(translate...() || '')
   - severity: String(translate...() || '')

3. **formatBatchAction with explicit String() on every property**:
   - reasoning: String(translate...() || 'Production batch scheduled')
   - urgency: String(reasoningData.urgency?.level || 'normal')

Why This Works:
- String() converts ANY value (including undefined, null) to string
- String(undefined) = "undefined" (string, not undefined)
- String('') = ""
- String(null) = "null"
- Combined with || fallbacks, ensures we always get valid strings
- Works in both dev and production builds

Protection Layers:
1. Translation functions return strings with || fallbacks
2. String() coercion wraps every return value
3. Formatter functions add another layer of || fallbacks
4. String() coercion wraps every formatter property
5. Components have useMemo and null guards

This makes it IMPOSSIBLE for undefined to reach React rendering.

frontend/src/hooks/useReasoningTranslation.ts

@@ -29,15 +29,17 @@ export function useReasoningTranslation() {
 
   /**
    * Translate purchase order reasoning
+   * IMPORTANT: Always returns a string, never undefined
    */
   const translatePOReasonng = (reasoningData: ReasoningData): string => {
     if (!reasoningData || !reasoningData.type) {
-      return t('purchaseOrder.low_stock_detection', {
+      const fallback = t('purchaseOrder.low_stock_detection', {
         supplier_name: 'Unknown',
         product_names_joined: 'Items',
         days_until_stockout: 7,
         defaultValue: 'Purchase order required for inventory replenishment'
       });
+      return String(fallback || 'Purchase order required');
     }
 
     const { type, parameters } = reasoningData;
@@ -51,21 +53,24 @@ export function useReasoningTranslation() {
       defaultValue: `Purchase order: ${type}`
     };
 
-    return t(`purchaseOrder.${type}`, params) || `Purchase order: ${type}`;
+    const result = t(`purchaseOrder.${type}`, params);
+    return String(result || `Purchase order: ${type}`);
   };
 
   /**
    * Translate production batch reasoning
+   * IMPORTANT: Always returns a string, never undefined
    */
   const translateBatchReasoning = (reasoningData: ReasoningData): string => {
     if (!reasoningData || !reasoningData.type) {
-      return t('productionBatch.forecast_demand', {
+      const fallback = t('productionBatch.forecast_demand', {
         product_name: 'Product',
         predicted_demand: 0,
         current_stock: 0,
         confidence_score: 85,
         defaultValue: 'Production batch scheduled based on demand forecast'
       });
+      return String(fallback || 'Production batch scheduled');
     }
 
     const { type, parameters } = reasoningData;
@@ -73,11 +78,13 @@ export function useReasoningTranslation() {
       ...parameters,
       defaultValue: `Production batch: ${type}`
     };
-    return t(`productionBatch.${type}`, params) || `Production batch: ${type}`;
+    const result = t(`productionBatch.${type}`, params);
+    return String(result || `Production batch: ${type}`);
   };
 
   /**
    * Translate consequence text
+   * IMPORTANT: Always returns a string, never undefined
    */
   const translateConsequence = (consequenceData?: any): string => {
     if (!consequenceData || !consequenceData.type) {
@@ -92,30 +99,37 @@ export function useReasoningTranslation() {
       defaultValue: `Impact: ${consequenceData.type}`
     };
 
-    return t(`consequence.${consequenceData.type}`, params) || '';
+    const result = t(`consequence.${consequenceData.type}`, params);
+    return String(result || '');
   };
 
   /**
    * Translate severity level
+   * IMPORTANT: Always returns a string, never undefined
    */
   const translateSeverity = (severity?: string): string => {
     if (!severity) return '';
-    return t(`severity.${severity}`, { defaultValue: severity }) || '';
+    const result = t(`severity.${severity}`, { defaultValue: severity });
+    return String(result || '');
   };
 
   /**
    * Translate trigger source
+   * IMPORTANT: Always returns a string, never undefined
    */
   const translateTrigger = (trigger?: string): string => {
     if (!trigger) return '';
-    return t(`triggers.${trigger}`, { defaultValue: trigger }) || '';
+    const result = t(`triggers.${trigger}`, { defaultValue: trigger });
+    return String(result || '');
   };
 
   /**
    * Translate error code
+   * IMPORTANT: Always returns a string, never undefined
    */
   const translateError = (errorCode: string): string => {
-    return t(`errors.${errorCode}`, { defaultValue: errorCode });
+    const result = t(`errors.${errorCode}`, { defaultValue: errorCode });
+    return String(result || errorCode);
   };
 
   return {
@@ -141,17 +155,17 @@ export function useReasoningFormatter() {
 
     if (!reasoningData) {
       const fallback = {
-        reasoning: translation.translatePOReasonng({} as ReasoningData) || 'Purchase order required',
+        reasoning: String(translation.translatePOReasonng({} as ReasoningData) || 'Purchase order required'),
-        consequence: '',
+        consequence: String(''),
-        severity: ''
+        severity: String('')
       };
       console.log('🔍 formatPOAction: No reasoning data, returning fallback:', fallback);
       return fallback;
     }
 
-    const reasoning = translation.translatePOReasonng(reasoningData) || 'Purchase order required';
+    const reasoning = String(translation.translatePOReasonng(reasoningData) || 'Purchase order required');
-    const consequence = translation.translateConsequence(reasoningData.consequence) || '';
+    const consequence = String(translation.translateConsequence(reasoningData.consequence) || '');
-    const severity = translation.translateSeverity(reasoningData.consequence?.severity) || '';
+    const severity = String(translation.translateSeverity(reasoningData.consequence?.severity) || '');
 
     const result = { reasoning, consequence, severity };
 
@@ -176,15 +190,15 @@ export function useReasoningFormatter() {
 
     if (!reasoningData) {
       const fallback = {
-        reasoning: translation.translateBatchReasoning({} as ReasoningData) || 'Production batch scheduled',
+        reasoning: String(translation.translateBatchReasoning({} as ReasoningData) || 'Production batch scheduled'),
-        urgency: 'normal'
+        urgency: String('normal')
       };
       console.log('🔍 formatBatchAction: No reasoning data, returning fallback:', fallback);
       return fallback;
     }
 
-    const reasoning = translation.translateBatchReasoning(reasoningData) || 'Production batch scheduled';
+    const reasoning = String(translation.translateBatchReasoning(reasoningData) || 'Production batch scheduled');
-    const urgency = reasoningData.urgency?.level || 'normal';
+    const urgency = String(reasoningData.urgency?.level || 'normal');
 
     const result = { reasoning, urgency };