refactor(frontend/training): replace SSE with polling for job updates

Updated the TrainingPage component to utilize polling instead of Server-Sent Events (SSE) for real-time job status updates. This change improves compatibility with AWS Amplify's Lambda@Edge limitations.

Modified files (3):
- frontend/app/training/[jobId]/page.tsx: Updated to use polling
- frontend/lib/useJobPolling.ts: Added custom hook for polling
- frontend/lib/useJobSSE.ts: Removed SSE hook

Author: cristofima

CHANGELOG.md

@@ -23,20 +23,34 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Supports: sklearn models (Random Forest, Extra Trees) and LightGBM
   - Verification step ensures exported ONNX model is valid
 
-- **Real-time Training Updates (SSE)** - Server-Sent Events for live status updates
-  - New `/api/jobs/[jobId]/stream` SSE endpoint in Next.js
-  - Custom `useJobSSE` hook with automatic fallback to polling
-  - Visual SSE connection status indicator on training page
-  - Updates every 3 seconds instead of 5 seconds polling
-  - Graceful handling of connection errors and timeouts
-
 - **Model Comparison** - Side-by-side comparison of training runs
   - New `/compare` page for comparing up to 4 models
   - Metrics comparison table with best model highlighting
   - Feature importance comparison with visual bars
   - Quick job selection from completed training history
   - Link to compare from history page header
 
+- **Training Run Tags & Notes** - Organize and annotate your training experiments
+  - Add custom tags (up to 10) and notes (up to 1000 chars) to any training job
+  - `JobMetadataEditor` component with edit/save workflow
+  - New `PATCH /jobs/{job_id}` API endpoint for metadata updates
+  - History page displays tags and supports filtering by tag
+  - Compact tag display mode in tables
+
+- **Enhanced Error Handling** - Comprehensive error boundaries for better UX
+  - Global `error.tsx` with network error detection and troubleshooting tips
+  - Custom `not-found.tsx` (404) page with quick navigation links
+  - `global-error.tsx` for critical root layout failures
+  - Route-specific error boundaries for `/training/[jobId]` and `/results/[jobId]`
+  - Development mode error details display
+  - Root `loading.tsx` with animated spinner
+
+- **Dataset Preview Enhancements** - Rich dataset visualization on configure page
+  - `ColumnStatsDisplay` component with dataset overview stats
+  - Visual column type distribution (numeric vs categorical)
+  - Missing values warning with affected columns list
+  - Selected column details with unique ratio visualization
+
 ### Fixed
 - **Problem Type Detection** - Regression datasets were incorrectly classified as classification
   - Fixed heuristic logic: now requires BOTH integer-like values AND low cardinality

frontend/README.md

@@ -49,16 +49,15 @@ frontend/
 │   ├── training/[jobId]/             # Training status page
 │   ├── results/[jobId]/              # Results & download page
 │   ├── compare/                      # Model comparison page (v1.1.0)
-│   ├── history/                      # Training history list
-│   └── api/jobs/[jobId]/stream/      # SSE endpoint for real-time updates
+│   └── history/                      # Training history list
 ├── components/
 │   ├── FileUpload.tsx                # Drag & drop upload component
 │   ├── Header.tsx                    # Navigation header with theme toggle
 │   └── ThemeToggle.tsx               # Dark/light mode switcher
 ├── lib/
 │   ├── api.ts                        # API client functions
 │   ├── utils.ts                      # Utility functions
-│   └── useJobSSE.ts                  # SSE hook with polling fallback
+│   └── useJobPolling.ts              # Job status polling hook
 ├── public/                           # Static assets
 └── package.json
 ```

frontend/app/api/jobs/[jobId]/stream/route.ts

@@ -3,7 +3,7 @@
 import { useEffect } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import { JobDetails } from '@/lib/api';
-import { useJobSSE } from '@/lib/useJobSSE';
+import { useJobPolling } from '@/lib/useJobPolling';
 import { getStatusColor, getStatusIcon, formatDuration, formatDateTime } from '@/lib/utils';
 import Header from '@/components/Header';
 
@@ -12,10 +12,9 @@ export default function TrainingPage() {
   const params = useParams();
   const jobId = params.jobId as string;
 
-  // Use SSE for real-time updates
-  const { job, isLoading, error, sseStatus, isUsingSSE } = useJobSSE(jobId, {
+  // Use polling for real-time updates
+  const { job, isLoading, error } = useJobPolling(jobId, {
     enabled: true,
-    fallbackToPolling: true,
     pollingInterval: 5000,
     onComplete: (completedJob: JobDetails) => {
       // Redirect to results when job completes
@@ -137,17 +136,9 @@ export default function TrainingPage() {
             <p className="text-sm text-gray-600 dark:text-gray-400 text-center mt-2">
               This may take a few minutes depending on dataset size and time budget
             </p>
-            {/* SSE Status Indicator */}
-            <div className="flex items-center justify-center gap-2 mt-2">
-              <span className={`inline-block w-2 h-2 rounded-full ${
-                sseStatus === 'connected' ? 'bg-green-500 animate-pulse' :
-                sseStatus === 'connecting' ? 'bg-yellow-500 animate-pulse' :
-                sseStatus === 'error' ? 'bg-red-500' : 'bg-gray-400'
-              }`}></span>
-              <span className="text-xs text-gray-500 dark:text-gray-500">
-                {isUsingSSE ? 'Real-time updates' : 'Polling for updates'} • {sseStatus}
-              </span>
-            </div>
+            <p className="text-xs text-gray-500 dark:text-gray-500 text-center mt-1">
+              Updating every 5 seconds
+            </p>
           </div>
 
           {/* Job Info */}

frontend/app/training/[jobId]/page.tsx

@@ -0,0 +1,119 @@
+/**
+ * Custom hook for job status polling
+ * 
+ * Polls the backend API for job status updates at a configurable interval.
+ * Automatically stops polling when job reaches a terminal state (completed/failed).
+ * 
+ * Note: This hook was originally designed for SSE but SSE is not compatible
+ * with AWS Amplify's Lambda@Edge (30s timeout). Polling is the reliable solution
+ * for serverless platforms.
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { JobDetails, getJobDetails } from './api';
+
+interface UseJobPollingOptions {
+  /** Enable polling (default: true) */
+  enabled?: boolean;
+  /** Polling interval in ms (default: 5000) */
+  pollingInterval?: number;
+  /** Callback when job completes */
+  onComplete?: (job: JobDetails) => void;
+  /** Callback when job fails */
+  onError?: (error: string) => void;
+}
+
+interface UseJobPollingResult {
+  /** Current job data */
+  job: JobDetails | null;
+  /** Loading state (initial fetch) */
+  isLoading: boolean;
+  /** Error message if any */
+  error: string | null;
+  /** Manually refresh job status */
+  refresh: () => Promise<void>;
+}
+
+export function useJobPolling(
+  jobId: string,
+  options: UseJobPollingOptions = {}
+): UseJobPollingResult {
+  const {
+    enabled = true,
+    pollingInterval = 5000,
+    onComplete,
+    onError,
+  } = options;
+
+  const [job, setJob] = useState<JobDetails | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  
+  const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const onCompleteRef = useRef(onComplete);
+  const onErrorRef = useRef(onError);
+
+  // Keep callbacks up to date
+  onCompleteRef.current = onComplete;
+  onErrorRef.current = onError;
+
+  // Cleanup function
+  const cleanup = useCallback(() => {
+    if (pollingIntervalRef.current) {
+      clearInterval(pollingIntervalRef.current);
+      pollingIntervalRef.current = null;
+    }
+  }, []);
+
+  const refresh = useCallback(async () => {
+    try {
+      const jobData = await getJobDetails(jobId);
+      setJob(jobData);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch job');
+    }
+  }, [jobId]);
+
+  // Setup polling
+  useEffect(() => {
+    if (!enabled || !jobId) return;
+
+    const poll = async () => {
+      try {
+        const jobData = await getJobDetails(jobId);
+        setJob(jobData);
+        setIsLoading(false);
+        setError(null);
+
+        // Handle terminal states
+        if (jobData.status === 'completed') {
+          cleanup();
+          onCompleteRef.current?.(jobData);
+        } else if (jobData.status === 'failed') {
+          cleanup();
+          onErrorRef.current?.(jobData.error_message || 'Training failed');
+        }
+      } catch (err) {
+        setIsLoading(false);
+        setError(err instanceof Error ? err.message : 'Failed to fetch job');
+        // Don't stop polling on transient errors
+      }
+    };
+
+    // Initial fetch
+    poll();
+
+    // Start polling
+    pollingIntervalRef.current = setInterval(poll, pollingInterval);
+
+    return cleanup;
+  }, [jobId, enabled, pollingInterval, cleanup]);
+
+  return {
+    job,
+    isLoading,
+    error,
+    refresh,
+  };
+}