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 };
-      reasoning,
+
-      consequence,
+    // Debug: Check for undefined values
-      severity
+    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 };
-      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,36 +167,46 @@ export function NewDashboardPage() {
         {/* Main Dashboard Layout */}
         <div className="space-y-6">
           {/* SECTION 1: Bakery Health Status */}
-          <HealthStatusCard healthStatus={healthStatus} loading={healthLoading} />
+          <ErrorBoundary componentName="HealthStatusCard">
+            <HealthStatusCard healthStatus={healthStatus} loading={healthLoading} />
+          </ErrorBoundary>
 
           {/* SECTION 2: What Needs Your Attention (Action Queue) */}
-          <ActionQueueCard
+          <ErrorBoundary componentName="ActionQueueCard">
-            actionQueue={actionQueue}
+            <ActionQueueCard
-            loading={actionQueueLoading}
+              actionQueue={actionQueue}
-            onApprove={handleApprove}
+              loading={actionQueueLoading}
-            onViewDetails={handleViewDetails}
+              onApprove={handleApprove}
-            onModify={handleModify}
+              onViewDetails={handleViewDetails}
-          />
+              onModify={handleModify}
+            />
+          </ErrorBoundary>
 
           {/* SECTION 3: What the System Did for You (Orchestration Summary) */}
-          <OrchestrationSummaryCard
+          <ErrorBoundary componentName="OrchestrationSummaryCard">
-            summary={orchestrationSummary}
+            <OrchestrationSummaryCard
-            loading={orchestrationLoading}
+              summary={orchestrationSummary}
-          />
+              loading={orchestrationLoading}
+            />
+          </ErrorBoundary>
 
           {/* SECTION 4: Today's Production Timeline */}
-          <ProductionTimelineCard
+          <ErrorBoundary componentName="ProductionTimelineCard">
-            timeline={productionTimeline}
+            <ProductionTimelineCard
-            loading={timelineLoading}
+              timeline={productionTimeline}
-            onStart={handleStartBatch}
+              loading={timelineLoading}
-            onPause={handlePauseBatch}
+              onStart={handleStartBatch}
-          />
+              onPause={handlePauseBatch}
+            />
+          </ErrorBoundary>
 
           {/* SECTION 5: Quick Insights Grid */}
-          <div>
+          <ErrorBoundary componentName="InsightsGrid">
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">Key Metrics</h2>
+            <div>
-            <InsightsGrid insights={insights} loading={insightsLoading} />
+              <h2 className="text-2xl font-bold text-gray-900 mb-4">Key Metrics</h2>
-          </div>
+              <InsightsGrid insights={insights} loading={insightsLoading} />
+            </div>
+          </ErrorBoundary>
 
           {/* SECTION 6: Quick Action Links */}
           <div className="bg-white rounded-xl shadow-md p-6">