debug: Add comprehensive debugging tools for React Error #306

Added systematic debugging infrastructure to identify the exact source
of undefined values causing React Error #306.

Changes Made:

1. **ErrorBoundary Component (NEW)**:
   - Created frontend/src/components/ErrorBoundary.tsx
   - Catches React errors and displays detailed debug information
   - Shows error message, stack trace, and component name
   - Has "Try Again" button to reset error state
   - Logs full error details to console with 🔴 prefix

2. **Debug Logging in useReasoningTranslation.ts**:
   - Added console.log in formatPOAction before processing
   - Logs fallback values when no reasoning data provided
   - Checks for undefined in result and logs error if found
   - Added console.log in formatBatchAction with same checks
   - Uses emojis for easy identification:
     - 🔍 = Debug info
     - ✅ = Success
     - 🔴 = Error detected

3. **Dashboard Debug Logging**:
   - Added useEffect to log all dashboard data on change
   - Logs: healthStatus, orchestrationSummary, actionQueue, etc.
   - Logs loading states for all queries
   - Helps identify which API calls return undefined

4. **Error Boundaries Around Components**:
   - Wrapped HealthStatusCard in ErrorBoundary
   - Wrapped ActionQueueCard in ErrorBoundary
   - Wrapped OrchestrationSummaryCard in ErrorBoundary
   - Wrapped ProductionTimelineCard in ErrorBoundary
   - Wrapped InsightsGrid in ErrorBoundary
   - Each boundary has componentName for easy identification

How to Use:

1. Open browser console
2. Load dashboard
3. Look for debug logs:
   - 🔍 Dashboard Data: Shows all fetched data
   - 🔍 formatPOAction/formatBatchAction: Shows translation calls
   - 🔴 errors: Shows if undefined detected
4. If error occurs, ErrorBoundary will show which component failed
5. Check console for full stack trace and component stack

This will help identify:
- Which component is rendering undefined
- What data is being passed to formatters
- Whether backend is returning unexpected data structures
- Exact line where error occurs

frontend/src/components/ErrorBoundary.tsx

@@ -0,0 +1,68 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  componentName?: string;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+  errorInfo?: ErrorInfo;
+}
+
+/**
+ * Error Boundary to catch React errors and show debug information
+ */
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('🔴 ErrorBoundary caught error:', {
+      component: this.props.componentName || 'Unknown',
+      error: error.message,
+      stack: error.stack,
+      componentStack: errorInfo.componentStack,
+    });
+
+    this.setState({ error, errorInfo });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="bg-red-50 border-2 border-red-300 rounded-xl p-6 m-4">
+          <h2 className="text-xl font-bold text-red-900 mb-2">
+            🔴 Error in {this.props.componentName || 'Component'}
+          </h2>
+          <div className="bg-white rounded p-4 mb-4">
+            <p className="text-sm font-mono text-red-800 mb-2">
+              <strong>Error:</strong> {this.state.error?.message}
+            </p>
+            {this.state.error?.stack && (
+              <details className="text-xs text-gray-700">
+                <summary className="cursor-pointer font-semibold">Stack Trace</summary>
+                <pre className="mt-2 overflow-auto">{this.state.error.stack}</pre>
+              </details>
+            )}
+          </div>
+          <button
+            onClick={() => this.setState({ hasError: false, error: undefined, errorInfo: undefined })}
+            className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg"
+          >
+            Try Again
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

frontend/src/hooks/useReasoningTranslation.ts

@@ -137,40 +137,70 @@ export function useReasoningFormatter() {
   const translation = useReasoningTranslation();
 
   const formatPOAction = useCallback((reasoningData?: ReasoningData) => {
+    console.log('🔍 formatPOAction called with:', reasoningData);
+
     if (!reasoningData) {
-      return {
+      const fallback = {
         reasoning: translation.translatePOReasonng({} as ReasoningData) || 'Purchase order required',
         consequence: '',
         severity: ''
       };
+      console.log('🔍 formatPOAction: No reasoning data, returning fallback:', fallback);
+      return fallback;
     }
 
     const reasoning = translation.translatePOReasonng(reasoningData) || 'Purchase order required';
     const consequence = translation.translateConsequence(reasoningData.consequence) || '';
     const severity = translation.translateSeverity(reasoningData.consequence?.severity) || '';
 
-    return {
+    const result = { reasoning, consequence, severity };
+
+    // Debug: Check for undefined values
+    if (reasoning === undefined || consequence === undefined || severity === undefined) {
+      console.error('🔴 formatPOAction returned undefined value!', {
+        reasoningData,
+        result,
         reasoning,
         consequence,
         severity
-    };
+      });
+    } else {
+      console.log('✅ formatPOAction result:', { type: reasoningData.type, result });
+    }
+
+    return result;
   }, [translation]);
 
   const formatBatchAction = useCallback((reasoningData?: ReasoningData) => {
+    console.log('🔍 formatBatchAction called with:', reasoningData);
+
     if (!reasoningData) {
-      return {
+      const fallback = {
         reasoning: translation.translateBatchReasoning({} as ReasoningData) || 'Production batch scheduled',
         urgency: 'normal'
       };
+      console.log('🔍 formatBatchAction: No reasoning data, returning fallback:', fallback);
+      return fallback;
     }
 
     const reasoning = translation.translateBatchReasoning(reasoningData) || 'Production batch scheduled';
     const urgency = reasoningData.urgency?.level || 'normal';
 
-    return {
+    const result = { reasoning, urgency };
+
+    // Debug: Check for undefined values
+    if (reasoning === undefined || urgency === undefined) {
+      console.error('🔴 formatBatchAction returned undefined value!', {
+        reasoningData,
+        result,
         reasoning,
         urgency
-    };
+      });
+    } else {
+      console.log('✅ formatBatchAction result:', { type: reasoningData.type, result });
+    }
+
+    return result;
   }, [translation]);
 
   return {

frontend/src/pages/app/DashboardPage.tsx

@@ -15,7 +15,7 @@
  * - Trust-building (explain system reasoning)
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { RefreshCw, ExternalLink } from 'lucide-react';
 import { useTenant } from '../../stores/tenant.store';
@@ -34,6 +34,7 @@ import { ActionQueueCard } from '../../components/dashboard/ActionQueueCard';
 import { OrchestrationSummaryCard } from '../../components/dashboard/OrchestrationSummaryCard';
 import { ProductionTimelineCard } from '../../components/dashboard/ProductionTimelineCard';
 import { InsightsGrid } from '../../components/dashboard/InsightsGrid';
+import { ErrorBoundary } from '../../components/ErrorBoundary';
 
 export function NewDashboardPage() {
   const navigate = useNavigate();
@@ -71,6 +72,25 @@ export function NewDashboardPage() {
     refetch: refetchInsights,
   } = useInsights(tenantId);
 
+  // Debug logging for data
+  useEffect(() => {
+    console.log('🔍 Dashboard Data:', {
+      healthStatus: healthStatus,
+      orchestrationSummary: orchestrationSummary,
+      actionQueue: actionQueue,
+      productionTimeline: productionTimeline,
+      insights: insights,
+      loading: {
+        health: healthLoading,
+        orchestration: orchestrationLoading,
+        actionQueue: actionQueueLoading,
+        timeline: timelineLoading,
+        insights: insightsLoading
+      }
+    });
+  }, [healthStatus, orchestrationSummary, actionQueue, productionTimeline, insights,
+      healthLoading, orchestrationLoading, actionQueueLoading, timelineLoading, insightsLoading]);
+
   // Mutations
   const approvePO = useApprovePurchaseOrder();
   const startBatch = useStartProductionBatch();
@@ -147,9 +167,12 @@ export function NewDashboardPage() {
         {/* Main Dashboard Layout */}
         <div className="space-y-6">
           {/* SECTION 1: Bakery Health Status */}
+          <ErrorBoundary componentName="HealthStatusCard">
             <HealthStatusCard healthStatus={healthStatus} loading={healthLoading} />
+          </ErrorBoundary>
 
           {/* SECTION 2: What Needs Your Attention (Action Queue) */}
+          <ErrorBoundary componentName="ActionQueueCard">
             <ActionQueueCard
               actionQueue={actionQueue}
               loading={actionQueueLoading}
@@ -157,26 +180,33 @@ export function NewDashboardPage() {
               onViewDetails={handleViewDetails}
               onModify={handleModify}
             />
+          </ErrorBoundary>
 
           {/* SECTION 3: What the System Did for You (Orchestration Summary) */}
+          <ErrorBoundary componentName="OrchestrationSummaryCard">
             <OrchestrationSummaryCard
               summary={orchestrationSummary}
               loading={orchestrationLoading}
             />
+          </ErrorBoundary>
 
           {/* SECTION 4: Today's Production Timeline */}
+          <ErrorBoundary componentName="ProductionTimelineCard">
             <ProductionTimelineCard
               timeline={productionTimeline}
               loading={timelineLoading}
               onStart={handleStartBatch}
               onPause={handlePauseBatch}
             />
+          </ErrorBoundary>
 
           {/* SECTION 5: Quick Insights Grid */}
+          <ErrorBoundary componentName="InsightsGrid">
             <div>
               <h2 className="text-2xl font-bold text-gray-900 mb-4">Key Metrics</h2>
               <InsightsGrid insights={insights} loading={insightsLoading} />
             </div>
+          </ErrorBoundary>
 
           {/* SECTION 6: Quick Action Links */}
           <div className="bg-white rounded-xl shadow-md p-6">