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;
+  }
+}