revert: Remove debugging infrastructure while keeping bug fixes

Removed:
- ErrorBoundary component and all error boundary wrapping
- Debug console.log statements from useReasoningTranslation
- Debug useEffect in DashboardPage
- Dev mode Dockerfile (Dockerfile.kubernetes.dev)
- Dev mode Tilt configuration
- Enhanced vite watcher config (depth, awaitWriteFinish, HMR overlay)

Kept actual bug fixes:
- String() coercion in translation functions
- useMemo/useCallback for formatters
- Null guards in components
- Basic vite ignored patterns (node_modules, dist, .git)
- Conditional rendering in DashboardPage

Tiltfile

@@ -48,25 +48,13 @@ def python_live_update(service_name, service_path):
 # =============================================================================
 # FRONTEND (React + Vite)
 # =============================================================================
-# DEV MODE: Uses Vite dev server with hot reload and unminified React
-# PROD MODE: Change dockerfile to './frontend/Dockerfile.kubernetes' for production builds
 docker_build(
     'bakery/dashboard',
     context='./frontend',
-    dockerfile='./frontend/Dockerfile.kubernetes.dev',  # DEV: Vite dev server
+    dockerfile='./frontend/Dockerfile.kubernetes',
     live_update=[
-        # Fall back to full rebuild if package.json changes
-        fall_back_on(['./frontend/package.json', './frontend/package-lock.json']),
-
-        # Sync source code changes - Vite will hot reload
         sync('./frontend/src', '/app/src'),
         sync('./frontend/public', '/app/public'),
-        sync('./frontend/index.html', '/app/index.html'),
-        sync('./frontend/vite.config.ts', '/app/vite.config.ts'),
-        sync('./frontend/tsconfig.json', '/app/tsconfig.json'),
-
-        # Reinstall dependencies if package.json changes
-        run('npm ci', trigger=['./frontend/package.json', './frontend/package-lock.json']),
     ]
 )
 

frontend/Dockerfile.kubernetes.dev

@@ -1,25 +0,0 @@
-# Development Dockerfile for Frontend - Vite Dev Server
-# This runs the Vite dev server with hot reload and unminified React
-
-FROM node:18-alpine
-
-WORKDIR /app
-
-# Install dependencies
-COPY package*.json ./
-RUN npm ci --verbose && \
-    npm cache clean --force
-
-# Copy source code
-COPY . .
-
-# Expose Vite dev server port
-EXPOSE 3000
-
-# Set NODE_ENV to development for unminified React
-ENV NODE_ENV=development
-
-# Start Vite dev server with host binding for Kubernetes
-# --host 0.0.0.0 allows external access from Kubernetes
-# --port 3000 keeps the same port as production
-CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "3000"]

frontend/src/components/ErrorBoundary.tsx

@@ -1,68 +0,0 @@
-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

@@ -151,70 +151,33 @@ export function useReasoningFormatter() {
   const translation = useReasoningTranslation();
 
   const formatPOAction = useCallback((reasoningData?: ReasoningData) => {
-    console.log('🔍 formatPOAction called with:', reasoningData);
-
     if (!reasoningData) {
-      const fallback = {
+      return {
         reasoning: String(translation.translatePOReasonng({} as ReasoningData) || 'Purchase order required'),
         consequence: String(''),
         severity: String('')
       };
-      console.log('🔍 formatPOAction: No reasoning data, returning fallback:', fallback);
-      return fallback;
     }
 
     const reasoning = String(translation.translatePOReasonng(reasoningData) || 'Purchase order required');
     const consequence = String(translation.translateConsequence(reasoningData.consequence) || '');
     const severity = String(translation.translateSeverity(reasoningData.consequence?.severity) || '');
 
-    const result = { reasoning, consequence, severity };
+    return { 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) {
-      const fallback = {
+      return {
         reasoning: String(translation.translateBatchReasoning({} as ReasoningData) || 'Production batch scheduled'),
         urgency: String('normal')
       };
-      console.log('🔍 formatBatchAction: No reasoning data, returning fallback:', fallback);
-      return fallback;
     }
 
     const reasoning = String(translation.translateBatchReasoning(reasoningData) || 'Production batch scheduled');
     const urgency = String(reasoningData.urgency?.level || 'normal');
 
-    const result = { reasoning, urgency };
+    return { 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, useEffect } from 'react';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { RefreshCw, ExternalLink } from 'lucide-react';
 import { useTenant } from '../../stores/tenant.store';
@@ -34,7 +34,6 @@ 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();
@@ -72,25 +71,6 @@ 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();
@@ -167,12 +147,10 @@ export function NewDashboardPage() {
         {/* Main Dashboard Layout */}
         <div className="space-y-6">
           {/* SECTION 1: Bakery Health Status */}
-          <ErrorBoundary componentName="HealthStatusCard">
+          {healthStatus && <HealthStatusCard healthStatus={healthStatus} loading={healthLoading} />}
-            <HealthStatusCard healthStatus={healthStatus} loading={healthLoading} />
-          </ErrorBoundary>
 
           {/* SECTION 2: What Needs Your Attention (Action Queue) */}
-          <ErrorBoundary componentName="ActionQueueCard">
+          {actionQueue && (
             <ActionQueueCard
               actionQueue={actionQueue}
               loading={actionQueueLoading}
@@ -180,33 +158,33 @@ export function NewDashboardPage() {
               onViewDetails={handleViewDetails}
               onModify={handleModify}
             />
-          </ErrorBoundary>
+          )}
 
           {/* SECTION 3: What the System Did for You (Orchestration Summary) */}
-          <ErrorBoundary componentName="OrchestrationSummaryCard">
+          {orchestrationSummary && (
             <OrchestrationSummaryCard
               summary={orchestrationSummary}
               loading={orchestrationLoading}
             />
-          </ErrorBoundary>
+          )}
 
           {/* SECTION 4: Today's Production Timeline */}
-          <ErrorBoundary componentName="ProductionTimelineCard">
+          {productionTimeline && (
             <ProductionTimelineCard
               timeline={productionTimeline}
               loading={timelineLoading}
               onStart={handleStartBatch}
               onPause={handlePauseBatch}
             />
-          </ErrorBoundary>
+          )}
 
           {/* SECTION 5: Quick Insights Grid */}
-          <ErrorBoundary componentName="InsightsGrid">
+          {insights && (
             <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">

frontend/vite.config.ts

@@ -24,14 +24,12 @@ export default defineConfig({
     host: '0.0.0.0', // Important for Docker
     port: 3000,
     watch: {
-      usePolling: true, // Important for Docker file watching
+      // Use polling for Docker/Kubernetes compatibility
-      // Ignore these directories to prevent "too many open files" error in Kubernetes
+      usePolling: true,
       ignored: [
         '**/node_modules/**',
         '**/dist/**',
         '**/.git/**',
-        '**/coverage/**',
-        '**/.cache/**',
       ],
     },
     proxy: {