feat: Add Analysis page, run comparison, notifications, and config editor

Dashboard enhancements:
- Add Analysis page with tabs: Overview, Parameters, Pareto, Correlations, Constraints, Surrogate, Runs
- Add PlotlyCorrelationHeatmap for parameter-objective correlation analysis
- Add PlotlyFeasibilityChart for constraint satisfaction visualization
- Add PlotlySurrogateQuality for FEA vs NN prediction comparison
- Add PlotlyRunComparison for comparing optimization runs within a study

Real-time improvements:
- Replace watchdog file-watching with SQLite database polling for better Windows reliability
- Add DatabasePoller class with 2-second polling interval
- Enhanced WebSocket messages: trial_completed, new_best, pareto_update, progress

Desktop notifications:
- Add useNotifications hook using Web Notifications API
- Add NotificationSettings toggle component
- Notify users when new best solutions are found

Config editor:
- Add PUT /studies/{study_id}/config endpoint with auto-backup
- Add ConfigEditor modal with tabs: General, Variables, Objectives, Settings, JSON
- Prevents editing while optimization is running

Enhanced Pareto visualization:
- Add dark mode styling with transparent backgrounds
- Add stats bar showing Pareto, FEA, NN, and infeasible counts
- Add Pareto front connecting line for 2D view
- Add table showing top 10 Pareto-optimal solutions

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

atomizer-dashboard/frontend/src/components/plotly/PlotlyCorrelationHeatmap.tsx

@@ -0,0 +1,161 @@
+import { useMemo } from 'react';
+import Plot from 'react-plotly.js';
+
+interface TrialData {
+  trial_number: number;
+  values: number[];
+  params: Record<string, number>;
+}
+
+interface PlotlyCorrelationHeatmapProps {
+  trials: TrialData[];
+  objectiveName?: string;
+  height?: number;
+}
+
+// Calculate Pearson correlation coefficient
+function pearsonCorrelation(x: number[], y: number[]): number {
+  const n = x.length;
+  if (n === 0 || n !== y.length) return 0;
+
+  const meanX = x.reduce((a, b) => a + b, 0) / n;
+  const meanY = y.reduce((a, b) => a + b, 0) / n;
+
+  let numerator = 0;
+  let denomX = 0;
+  let denomY = 0;
+
+  for (let i = 0; i < n; i++) {
+    const dx = x[i] - meanX;
+    const dy = y[i] - meanY;
+    numerator += dx * dy;
+    denomX += dx * dx;
+    denomY += dy * dy;
+  }
+
+  const denominator = Math.sqrt(denomX) * Math.sqrt(denomY);
+  return denominator === 0 ? 0 : numerator / denominator;
+}
+
+export function PlotlyCorrelationHeatmap({
+  trials,
+  objectiveName = 'Objective',
+  height = 500
+}: PlotlyCorrelationHeatmapProps) {
+  const { matrix, labels, annotations } = useMemo(() => {
+    if (trials.length < 3) {
+      return { matrix: [], labels: [], annotations: [] };
+    }
+
+    // Get parameter names
+    const paramNames = Object.keys(trials[0].params);
+    const allLabels = [...paramNames, objectiveName];
+
+    // Extract data columns
+    const columns: Record<string, number[]> = {};
+    paramNames.forEach(name => {
+      columns[name] = trials.map(t => t.params[name]).filter(v => v !== undefined && !isNaN(v));
+    });
+    columns[objectiveName] = trials.map(t => t.values[0]).filter(v => v !== undefined && !isNaN(v));
+
+    // Calculate correlation matrix
+    const n = allLabels.length;
+    const correlationMatrix: number[][] = [];
+    const annotationData: any[] = [];
+
+    for (let i = 0; i < n; i++) {
+      const row: number[] = [];
+      for (let j = 0; j < n; j++) {
+        const col1 = columns[allLabels[i]];
+        const col2 = columns[allLabels[j]];
+
+        // Ensure same length
+        const minLen = Math.min(col1.length, col2.length);
+        const corr = pearsonCorrelation(col1.slice(0, minLen), col2.slice(0, minLen));
+        row.push(corr);
+
+        // Add annotation
+        annotationData.push({
+          x: allLabels[j],
+          y: allLabels[i],
+          text: corr.toFixed(2),
+          showarrow: false,
+          font: {
+            color: Math.abs(corr) > 0.5 ? '#fff' : '#888',
+            size: 11
+          }
+        });
+      }
+      correlationMatrix.push(row);
+    }
+
+    return {
+      matrix: correlationMatrix,
+      labels: allLabels,
+      annotations: annotationData
+    };
+  }, [trials, objectiveName]);
+
+  if (trials.length < 3) {
+    return (
+      <div className="h-64 flex items-center justify-center text-dark-400">
+        <p>Need at least 3 trials to compute correlations</p>
+      </div>
+    );
+  }
+
+  return (
+    <Plot
+      data={[
+        {
+          z: matrix,
+          x: labels,
+          y: labels,
+          type: 'heatmap',
+          colorscale: [
+            [0, '#ef4444'],    // -1: strong negative (red)
+            [0.25, '#f87171'], // -0.5: moderate negative
+            [0.5, '#1a1b26'],  // 0: no correlation (dark)
+            [0.75, '#60a5fa'], // 0.5: moderate positive
+            [1, '#3b82f6']     // 1: strong positive (blue)
+          ],
+          zmin: -1,
+          zmax: 1,
+          showscale: true,
+          colorbar: {
+            title: { text: 'Correlation', font: { color: '#888' } },
+            tickfont: { color: '#888' },
+            len: 0.8
+          },
+          hovertemplate: '%{y} vs %{x}<br>Correlation: %{z:.3f}<extra></extra>'
+        }
+      ]}
+      layout={{
+        title: {
+          text: 'Parameter-Objective Correlation Matrix',
+          font: { color: '#fff', size: 14 }
+        },
+        height,
+        margin: { l: 120, r: 60, t: 60, b: 120 },
+        paper_bgcolor: 'transparent',
+        plot_bgcolor: 'transparent',
+        xaxis: {
+          tickangle: 45,
+          tickfont: { color: '#888', size: 10 },
+          gridcolor: 'rgba(255,255,255,0.05)'
+        },
+        yaxis: {
+          tickfont: { color: '#888', size: 10 },
+          gridcolor: 'rgba(255,255,255,0.05)'
+        },
+        annotations: annotations
+      }}
+      config={{
+        displayModeBar: true,
+        modeBarButtonsToRemove: ['lasso2d', 'select2d'],
+        displaylogo: false
+      }}
+      style={{ width: '100%' }}
+    />
+  );
+}

atomizer-dashboard/frontend/src/components/plotly/PlotlyFeasibilityChart.tsx

@@ -0,0 +1,120 @@
+import { useMemo } from 'react';
+import Plot from 'react-plotly.js';
+
+interface TrialData {
+  trial_number: number;
+  values: number[];
+  constraint_satisfied?: boolean;
+}
+
+interface PlotlyFeasibilityChartProps {
+  trials: TrialData[];
+  height?: number;
+}
+
+export function PlotlyFeasibilityChart({
+  trials,
+  height = 350
+}: PlotlyFeasibilityChartProps) {
+  const { trialNumbers, cumulativeFeasibility, windowedFeasibility } = useMemo(() => {
+    if (trials.length === 0) {
+      return { trialNumbers: [], cumulativeFeasibility: [], windowedFeasibility: [] };
+    }
+
+    // Sort trials by number
+    const sorted = [...trials].sort((a, b) => a.trial_number - b.trial_number);
+
+    const numbers: number[] = [];
+    const cumulative: number[] = [];
+    const windowed: number[] = [];
+
+    let feasibleCount = 0;
+    const windowSize = Math.min(20, Math.floor(sorted.length / 5) || 1);
+
+    sorted.forEach((trial, idx) => {
+      numbers.push(trial.trial_number);
+
+      // Cumulative feasibility
+      if (trial.constraint_satisfied !== false) {
+        feasibleCount++;
+      }
+      cumulative.push((feasibleCount / (idx + 1)) * 100);
+
+      // Windowed (rolling) feasibility
+      const windowStart = Math.max(0, idx - windowSize + 1);
+      const windowTrials = sorted.slice(windowStart, idx + 1);
+      const windowFeasible = windowTrials.filter(t => t.constraint_satisfied !== false).length;
+      windowed.push((windowFeasible / windowTrials.length) * 100);
+    });
+
+    return { trialNumbers: numbers, cumulativeFeasibility: cumulative, windowedFeasibility: windowed };
+  }, [trials]);
+
+  if (trials.length === 0) {
+    return (
+      <div className="h-64 flex items-center justify-center text-dark-400">
+        <p>No trials to display</p>
+      </div>
+    );
+  }
+
+  return (
+    <Plot
+      data={[
+        {
+          x: trialNumbers,
+          y: cumulativeFeasibility,
+          type: 'scatter',
+          mode: 'lines',
+          name: 'Cumulative Feasibility',
+          line: { color: '#22c55e', width: 2 },
+          hovertemplate: 'Trial %{x}<br>Cumulative: %{y:.1f}%<extra></extra>'
+        },
+        {
+          x: trialNumbers,
+          y: windowedFeasibility,
+          type: 'scatter',
+          mode: 'lines',
+          name: 'Rolling (20-trial)',
+          line: { color: '#60a5fa', width: 2, dash: 'dot' },
+          hovertemplate: 'Trial %{x}<br>Rolling: %{y:.1f}%<extra></extra>'
+        }
+      ]}
+      layout={{
+        height,
+        margin: { l: 60, r: 30, t: 30, b: 50 },
+        paper_bgcolor: 'transparent',
+        plot_bgcolor: 'transparent',
+        xaxis: {
+          title: { text: 'Trial Number', font: { color: '#888' } },
+          tickfont: { color: '#888' },
+          gridcolor: 'rgba(255,255,255,0.05)',
+          zeroline: false
+        },
+        yaxis: {
+          title: { text: 'Feasibility Rate (%)', font: { color: '#888' } },
+          tickfont: { color: '#888' },
+          gridcolor: 'rgba(255,255,255,0.1)',
+          zeroline: false,
+          range: [0, 105]
+        },
+        legend: {
+          font: { color: '#888' },
+          bgcolor: 'rgba(0,0,0,0.5)',
+          x: 0.02,
+          y: 0.98,
+          xanchor: 'left',
+          yanchor: 'top'
+        },
+        showlegend: true,
+        hovermode: 'x unified'
+      }}
+      config={{
+        displayModeBar: true,
+        modeBarButtonsToRemove: ['lasso2d', 'select2d'],
+        displaylogo: false
+      }}
+      style={{ width: '100%' }}
+    />
+  );
+}

atomizer-dashboard/frontend/src/components/plotly/PlotlyParetoPlot.tsx

@@ -5,8 +5,10 @@
  * - 2D scatter with Pareto front highlighted
  * - 3D scatter for 3-objective problems
  * - Hover tooltips with trial details
- * - Click to select trials
+ * - Pareto front connection line
  * - FEA vs NN differentiation
+ * - Constraint satisfaction highlighting
+ * - Dark mode styling
  * - Zoom, pan, and export
  */
 
@@ -19,6 +21,7 @@ interface Trial {
   params: Record<string, number>;
   user_attrs?: Record<string, any>;
   source?: 'FEA' | 'NN' | 'V10_FEA';
+  constraint_satisfied?: boolean;
 }
 
 interface Objective {
@@ -32,28 +35,37 @@ interface PlotlyParetoPlotProps {
   paretoFront: Trial[];
   objectives: Objective[];
   height?: number;
+  showParetoLine?: boolean;
+  showInfeasible?: boolean;
 }
 
 export function PlotlyParetoPlot({
   trials,
   paretoFront,
   objectives,
-  height = 500
+  height = 500,
+  showParetoLine = true,
+  showInfeasible = true
 }: PlotlyParetoPlotProps) {
   const [viewMode, setViewMode] = useState<'2d' | '3d'>(objectives.length >= 3 ? '3d' : '2d');
   const [selectedObjectives, setSelectedObjectives] = useState<[number, number, number]>([0, 1, 2]);
 
   const paretoSet = useMemo(() => new Set(paretoFront.map(t => t.trial_number)), [paretoFront]);
 
-  // Separate trials by source and Pareto status
-  const { feaTrials, nnTrials, paretoTrials } = useMemo(() => {
+  // Separate trials by source, Pareto status, and constraint satisfaction
+  const { feaTrials, nnTrials, paretoTrials, infeasibleTrials, stats } = useMemo(() => {
     const fea: Trial[] = [];
     const nn: Trial[] = [];
     const pareto: Trial[] = [];
+    const infeasible: Trial[] = [];
 
     trials.forEach(t => {
       const source = t.source || t.user_attrs?.source || 'FEA';
-      if (paretoSet.has(t.trial_number)) {
+      const isFeasible = t.constraint_satisfied !== false && t.user_attrs?.constraint_satisfied !== false;
+
+      if (!isFeasible && showInfeasible) {
+        infeasible.push(t);
+      } else if (paretoSet.has(t.trial_number)) {
         pareto.push(t);
       } else if (source === 'NN') {
         nn.push(t);
@@ -62,8 +74,18 @@ export function PlotlyParetoPlot({
       }
     });
 
-    return { feaTrials: fea, nnTrials: nn, paretoTrials: pareto };
-  }, [trials, paretoSet]);
+    // Calculate statistics
+    const stats = {
+      totalTrials: trials.length,
+      paretoCount: pareto.length,
+      feaCount: fea.length + pareto.filter(t => (t.source || 'FEA') !== 'NN').length,
+      nnCount: nn.length + pareto.filter(t => t.source === 'NN').length,
+      infeasibleCount: infeasible.length,
+      hypervolume: 0 // Could calculate if needed
+    };
+
+    return { feaTrials: fea, nnTrials: nn, paretoTrials: pareto, infeasibleTrials: infeasible, stats };
+  }, [trials, paretoSet, showInfeasible]);
 
   // Helper to get objective value
   const getObjValue = (trial: Trial, idx: number): number => {
@@ -135,80 +157,129 @@ export function PlotlyParetoPlot({
     }
   };
 
+  // Sort Pareto trials by first objective for line connection
+  const sortedParetoTrials = useMemo(() => {
+    const [i] = selectedObjectives;
+    return [...paretoTrials].sort((a, b) => getObjValue(a, i) - getObjValue(b, i));
+  }, [paretoTrials, selectedObjectives]);
+
+  // Create Pareto front line trace (2D only)
+  const createParetoLine = () => {
+    if (!showParetoLine || viewMode === '3d' || sortedParetoTrials.length < 2) return null;
+    const [i, j] = selectedObjectives;
+    return {
+      type: 'scatter' as const,
+      mode: 'lines' as const,
+      name: 'Pareto Front',
+      x: sortedParetoTrials.map(t => getObjValue(t, i)),
+      y: sortedParetoTrials.map(t => getObjValue(t, j)),
+      line: {
+        color: '#10B981',
+        width: 2,
+        dash: 'dot'
+      },
+      hoverinfo: 'skip' as const,
+      showlegend: false
+    };
+  };
+
   const traces = [
-    // FEA trials (background, less prominent)
-    createTrace(feaTrials, `FEA (${feaTrials.length})`, '#93C5FD', 'circle', 8, 0.6),
-    // NN trials (background, less prominent)
-    createTrace(nnTrials, `NN (${nnTrials.length})`, '#FDBA74', 'cross', 8, 0.5),
-    // Pareto front (highlighted)
-    createTrace(paretoTrials, `Pareto (${paretoTrials.length})`, '#10B981', 'diamond', 12, 1.0)
-  ].filter(trace => (trace.x as number[]).length > 0);
+    // Infeasible trials (background, red X)
+    ...(showInfeasible && infeasibleTrials.length > 0 ? [
+      createTrace(infeasibleTrials, `Infeasible (${infeasibleTrials.length})`, '#EF4444', 'x', 7, 0.4)
+    ] : []),
+    // FEA trials (blue circles)
+    createTrace(feaTrials, `FEA (${feaTrials.length})`, '#3B82F6', 'circle', 8, 0.6),
+    // NN trials (purple diamonds)
+    createTrace(nnTrials, `NN (${nnTrials.length})`, '#A855F7', 'diamond', 8, 0.5),
+    // Pareto front line (2D only)
+    createParetoLine(),
+    // Pareto front points (highlighted)
+    createTrace(sortedParetoTrials, `Pareto (${sortedParetoTrials.length})`, '#10B981', 'star', 14, 1.0)
+  ].filter(trace => trace && (trace.x as number[]).length > 0);
 
   const [i, j, k] = selectedObjectives;
 
+  // Dark mode color scheme
+  const colors = {
+    text: '#E5E7EB',
+    textMuted: '#9CA3AF',
+    grid: 'rgba(255,255,255,0.1)',
+    zeroline: 'rgba(255,255,255,0.2)',
+    legendBg: 'rgba(30,30,30,0.9)',
+    legendBorder: 'rgba(255,255,255,0.1)'
+  };
+
   const layout: any = viewMode === '3d' && objectives.length >= 3
     ? {
         height,
         margin: { l: 50, r: 50, t: 30, b: 50 },
-        paper_bgcolor: 'rgba(0,0,0,0)',
-        plot_bgcolor: 'rgba(0,0,0,0)',
+        paper_bgcolor: 'transparent',
+        plot_bgcolor: 'transparent',
         scene: {
           xaxis: {
-            title: objectives[i]?.name || 'Objective 1',
-            gridcolor: '#E5E7EB',
-            zerolinecolor: '#D1D5DB'
+            title: { text: objectives[i]?.name || 'Objective 1', font: { color: colors.text } },
+            gridcolor: colors.grid,
+            zerolinecolor: colors.zeroline,
+            tickfont: { color: colors.textMuted }
           },
           yaxis: {
-            title: objectives[j]?.name || 'Objective 2',
-            gridcolor: '#E5E7EB',
-            zerolinecolor: '#D1D5DB'
+            title: { text: objectives[j]?.name || 'Objective 2', font: { color: colors.text } },
+            gridcolor: colors.grid,
+            zerolinecolor: colors.zeroline,
+            tickfont: { color: colors.textMuted }
           },
           zaxis: {
-            title: objectives[k]?.name || 'Objective 3',
-            gridcolor: '#E5E7EB',
-            zerolinecolor: '#D1D5DB'
+            title: { text: objectives[k]?.name || 'Objective 3', font: { color: colors.text } },
+            gridcolor: colors.grid,
+            zerolinecolor: colors.zeroline,
+            tickfont: { color: colors.textMuted }
           },
-          bgcolor: 'rgba(0,0,0,0)'
+          bgcolor: 'transparent'
         },
         legend: {
           x: 1,
           y: 1,
-          bgcolor: 'rgba(255,255,255,0.8)',
-          bordercolor: '#E5E7EB',
+          font: { color: colors.text },
+          bgcolor: colors.legendBg,
+          bordercolor: colors.legendBorder,
           borderwidth: 1
         },
-        font: { family: 'Inter, system-ui, sans-serif' }
+        font: { family: 'Inter, system-ui, sans-serif', color: colors.text }
       }
     : {
         height,
         margin: { l: 60, r: 30, t: 30, b: 60 },
-        paper_bgcolor: 'rgba(0,0,0,0)',
-        plot_bgcolor: 'rgba(0,0,0,0)',
+        paper_bgcolor: 'transparent',
+        plot_bgcolor: 'transparent',
         xaxis: {
-          title: objectives[i]?.name || 'Objective 1',
-          gridcolor: '#E5E7EB',
-          zerolinecolor: '#D1D5DB'
+          title: { text: objectives[i]?.name || 'Objective 1', font: { color: colors.text } },
+          gridcolor: colors.grid,
+          zerolinecolor: colors.zeroline,
+          tickfont: { color: colors.textMuted }
         },
         yaxis: {
-          title: objectives[j]?.name || 'Objective 2',
-          gridcolor: '#E5E7EB',
-          zerolinecolor: '#D1D5DB'
+          title: { text: objectives[j]?.name || 'Objective 2', font: { color: colors.text } },
+          gridcolor: colors.grid,
+          zerolinecolor: colors.zeroline,
+          tickfont: { color: colors.textMuted }
         },
         legend: {
           x: 1,
           y: 1,
           xanchor: 'right',
-          bgcolor: 'rgba(255,255,255,0.8)',
-          bordercolor: '#E5E7EB',
+          font: { color: colors.text },
+          bgcolor: colors.legendBg,
+          bordercolor: colors.legendBorder,
           borderwidth: 1
         },
-        font: { family: 'Inter, system-ui, sans-serif' },
+        font: { family: 'Inter, system-ui, sans-serif', color: colors.text },
         hovermode: 'closest' as const
       };
 
   if (!trials.length) {
     return (
-      <div className="flex items-center justify-center h-64 text-gray-500">
+      <div className="flex items-center justify-center h-64 text-dark-400">
         No trial data available
       </div>
     );
@@ -216,20 +287,54 @@ export function PlotlyParetoPlot({
 
   return (
     <div className="w-full">
+      {/* Stats Bar */}
+      <div className="flex gap-4 mb-4 text-sm">
+        <div className="flex items-center gap-2 px-3 py-1.5 bg-dark-700 rounded-lg">
+          <div className="w-3 h-3 bg-green-500 rounded-full" />
+          <span className="text-dark-300">Pareto:</span>
+          <span className="text-green-400 font-medium">{stats.paretoCount}</span>
+        </div>
+        <div className="flex items-center gap-2 px-3 py-1.5 bg-dark-700 rounded-lg">
+          <div className="w-3 h-3 bg-blue-500 rounded-full" />
+          <span className="text-dark-300">FEA:</span>
+          <span className="text-blue-400 font-medium">{stats.feaCount}</span>
+        </div>
+        <div className="flex items-center gap-2 px-3 py-1.5 bg-dark-700 rounded-lg">
+          <div className="w-3 h-3 bg-purple-500 rounded-full" />
+          <span className="text-dark-300">NN:</span>
+          <span className="text-purple-400 font-medium">{stats.nnCount}</span>
+        </div>
+        {stats.infeasibleCount > 0 && (
+          <div className="flex items-center gap-2 px-3 py-1.5 bg-dark-700 rounded-lg">
+            <div className="w-3 h-3 bg-red-500 rounded-full" />
+            <span className="text-dark-300">Infeasible:</span>
+            <span className="text-red-400 font-medium">{stats.infeasibleCount}</span>
+          </div>
+        )}
+      </div>
+
       {/* Controls */}
       <div className="flex gap-4 items-center justify-between mb-3">
         <div className="flex gap-2 items-center">
           {objectives.length >= 3 && (
-            <div className="flex rounded-lg overflow-hidden border border-gray-300">
+            <div className="flex rounded-lg overflow-hidden border border-dark-600">
               <button
                 onClick={() => setViewMode('2d')}
-                className={`px-3 py-1 text-sm ${viewMode === '2d' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}
+                className={`px-3 py-1.5 text-sm font-medium transition-colors ${
+                  viewMode === '2d'
+                    ? 'bg-primary-600 text-white'
+                    : 'bg-dark-700 text-dark-300 hover:bg-dark-600 hover:text-white'
+                }`}
               >
                 2D
               </button>
               <button
                 onClick={() => setViewMode('3d')}
-                className={`px-3 py-1 text-sm ${viewMode === '3d' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}
+                className={`px-3 py-1.5 text-sm font-medium transition-colors ${
+                  viewMode === '3d'
+                    ? 'bg-primary-600 text-white'
+                    : 'bg-dark-700 text-dark-300 hover:bg-dark-600 hover:text-white'
+                }`}
               >
                 3D
               </button>
@@ -239,22 +344,22 @@ export function PlotlyParetoPlot({
 
         {/* Objective selectors */}
         <div className="flex gap-2 items-center text-sm">
-          <label className="text-gray-600">X:</label>
+          <label className="text-dark-400">X:</label>
           <select
             value={selectedObjectives[0]}
             onChange={(e) => setSelectedObjectives([parseInt(e.target.value), selectedObjectives[1], selectedObjectives[2]])}
-            className="px-2 py-1 border border-gray-300 rounded text-sm"
+            className="px-2 py-1.5 bg-dark-700 border border-dark-600 rounded text-white text-sm"
           >
             {objectives.map((obj, idx) => (
               <option key={idx} value={idx}>{obj.name}</option>
             ))}
           </select>
 
-          <label className="text-gray-600 ml-2">Y:</label>
+          <label className="text-dark-400 ml-2">Y:</label>
           <select
             value={selectedObjectives[1]}
             onChange={(e) => setSelectedObjectives([selectedObjectives[0], parseInt(e.target.value), selectedObjectives[2]])}
-            className="px-2 py-1 border border-gray-300 rounded text-sm"
+            className="px-2 py-1.5 bg-dark-700 border border-dark-600 rounded text-white text-sm"
           >
             {objectives.map((obj, idx) => (
               <option key={idx} value={idx}>{obj.name}</option>
@@ -263,11 +368,11 @@ export function PlotlyParetoPlot({
 
           {viewMode === '3d' && objectives.length >= 3 && (
             <>
-              <label className="text-gray-600 ml-2">Z:</label>
+              <label className="text-dark-400 ml-2">Z:</label>
               <select
                 value={selectedObjectives[2]}
                 onChange={(e) => setSelectedObjectives([selectedObjectives[0], selectedObjectives[1], parseInt(e.target.value)])}
-                className="px-2 py-1 border border-gray-300 rounded text-sm"
+                className="px-2 py-1.5 bg-dark-700 border border-dark-600 rounded text-white text-sm"
               >
                 {objectives.map((obj, idx) => (
                   <option key={idx} value={idx}>{obj.name}</option>
@@ -284,7 +389,7 @@ export function PlotlyParetoPlot({
         config={{
           displayModeBar: true,
           displaylogo: false,
-          modeBarButtonsToRemove: ['lasso2d'],
+          modeBarButtonsToRemove: ['lasso2d', 'select2d'],
           toImageButtonOptions: {
             format: 'png',
             filename: 'pareto_front',
@@ -295,6 +400,49 @@ export function PlotlyParetoPlot({
         }}
         style={{ width: '100%' }}
       />
+
+      {/* Pareto Front Table for 2D view */}
+      {viewMode === '2d' && sortedParetoTrials.length > 0 && (
+        <div className="mt-4 max-h-48 overflow-auto">
+          <table className="w-full text-sm">
+            <thead className="sticky top-0 bg-dark-800">
+              <tr className="border-b border-dark-600">
+                <th className="text-left py-2 px-3 text-dark-400 font-medium">Trial</th>
+                <th className="text-left py-2 px-3 text-dark-400 font-medium">{objectives[i]?.name || 'Obj 1'}</th>
+                <th className="text-left py-2 px-3 text-dark-400 font-medium">{objectives[j]?.name || 'Obj 2'}</th>
+                <th className="text-left py-2 px-3 text-dark-400 font-medium">Source</th>
+              </tr>
+            </thead>
+            <tbody>
+              {sortedParetoTrials.slice(0, 10).map(trial => (
+                <tr key={trial.trial_number} className="border-b border-dark-700 hover:bg-dark-750">
+                  <td className="py-2 px-3 font-mono text-white">#{trial.trial_number}</td>
+                  <td className="py-2 px-3 font-mono text-green-400">
+                    {getObjValue(trial, i).toExponential(4)}
+                  </td>
+                  <td className="py-2 px-3 font-mono text-green-400">
+                    {getObjValue(trial, j).toExponential(4)}
+                  </td>
+                  <td className="py-2 px-3">
+                    <span className={`px-2 py-0.5 rounded text-xs ${
+                      (trial.source || trial.user_attrs?.source) === 'NN'
+                        ? 'bg-purple-500/20 text-purple-400'
+                        : 'bg-blue-500/20 text-blue-400'
+                    }`}>
+                      {trial.source || trial.user_attrs?.source || 'FEA'}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          {sortedParetoTrials.length > 10 && (
+            <div className="text-center py-2 text-dark-500 text-xs">
+              Showing 10 of {sortedParetoTrials.length} Pareto-optimal solutions
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }

atomizer-dashboard/frontend/src/components/plotly/PlotlyRunComparison.tsx

@@ -0,0 +1,247 @@
+import { useMemo } from 'react';
+import Plot from 'react-plotly.js';
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
+
+interface Run {
+  run_id: number;
+  name: string;
+  source: 'FEA' | 'NN';
+  trial_count: number;
+  best_value: number | null;
+  avg_value: number | null;
+  first_trial: string | null;
+  last_trial: string | null;
+}
+
+interface PlotlyRunComparisonProps {
+  runs: Run[];
+  height?: number;
+}
+
+export function PlotlyRunComparison({ runs, height = 400 }: PlotlyRunComparisonProps) {
+  const chartData = useMemo(() => {
+    if (runs.length === 0) return null;
+
+    // Separate FEA and NN runs
+    const feaRuns = runs.filter(r => r.source === 'FEA');
+    const nnRuns = runs.filter(r => r.source === 'NN');
+
+    // Create bar chart for trial counts
+    const trialCountData = {
+      x: runs.map(r => r.name),
+      y: runs.map(r => r.trial_count),
+      type: 'bar' as const,
+      name: 'Trial Count',
+      marker: {
+        color: runs.map(r => r.source === 'NN' ? 'rgba(147, 51, 234, 0.8)' : 'rgba(59, 130, 246, 0.8)'),
+        line: { color: runs.map(r => r.source === 'NN' ? 'rgb(147, 51, 234)' : 'rgb(59, 130, 246)'), width: 1 }
+      },
+      hovertemplate: '<b>%{x}</b><br>Trials: %{y}<extra></extra>'
+    };
+
+    // Create line chart for best values
+    const bestValueData = {
+      x: runs.map(r => r.name),
+      y: runs.map(r => r.best_value),
+      type: 'scatter' as const,
+      mode: 'lines+markers' as const,
+      name: 'Best Value',
+      yaxis: 'y2',
+      line: { color: 'rgba(16, 185, 129, 1)', width: 2 },
+      marker: { size: 8, color: 'rgba(16, 185, 129, 1)' },
+      hovertemplate: '<b>%{x}</b><br>Best: %{y:.4e}<extra></extra>'
+    };
+
+    return { trialCountData, bestValueData, feaRuns, nnRuns };
+  }, [runs]);
+
+  // Calculate statistics
+  const stats = useMemo(() => {
+    if (runs.length === 0) return null;
+
+    const totalTrials = runs.reduce((sum, r) => sum + r.trial_count, 0);
+    const feaTrials = runs.filter(r => r.source === 'FEA').reduce((sum, r) => sum + r.trial_count, 0);
+    const nnTrials = runs.filter(r => r.source === 'NN').reduce((sum, r) => sum + r.trial_count, 0);
+
+    const bestValues = runs.map(r => r.best_value).filter((v): v is number => v !== null);
+    const overallBest = bestValues.length > 0 ? Math.min(...bestValues) : null;
+
+    // Calculate improvement from first FEA run to overall best
+    const feaRuns = runs.filter(r => r.source === 'FEA');
+    const firstFEA = feaRuns.length > 0 ? feaRuns[0].best_value : null;
+    const improvement = firstFEA && overallBest ? ((firstFEA - overallBest) / Math.abs(firstFEA)) * 100 : null;
+
+    return {
+      totalTrials,
+      feaTrials,
+      nnTrials,
+      overallBest,
+      improvement,
+      totalRuns: runs.length,
+      feaRuns: runs.filter(r => r.source === 'FEA').length,
+      nnRuns: runs.filter(r => r.source === 'NN').length
+    };
+  }, [runs]);
+
+  if (!chartData || !stats) {
+    return (
+      <div className="flex items-center justify-center h-64 text-dark-400">
+        No run data available
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Stats Summary */}
+      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
+        <div className="bg-dark-750 rounded-lg p-3">
+          <div className="text-xs text-dark-400 mb-1">Total Runs</div>
+          <div className="text-xl font-bold text-white">{stats.totalRuns}</div>
+        </div>
+        <div className="bg-dark-750 rounded-lg p-3">
+          <div className="text-xs text-dark-400 mb-1">Total Trials</div>
+          <div className="text-xl font-bold text-white">{stats.totalTrials}</div>
+        </div>
+        <div className="bg-dark-750 rounded-lg p-3">
+          <div className="text-xs text-dark-400 mb-1">FEA Trials</div>
+          <div className="text-xl font-bold text-blue-400">{stats.feaTrials}</div>
+        </div>
+        <div className="bg-dark-750 rounded-lg p-3">
+          <div className="text-xs text-dark-400 mb-1">NN Trials</div>
+          <div className="text-xl font-bold text-purple-400">{stats.nnTrials}</div>
+        </div>
+        <div className="bg-dark-750 rounded-lg p-3">
+          <div className="text-xs text-dark-400 mb-1">Best Value</div>
+          <div className="text-xl font-bold text-green-400">
+            {stats.overallBest !== null ? stats.overallBest.toExponential(3) : 'N/A'}
+          </div>
+        </div>
+        <div className="bg-dark-750 rounded-lg p-3">
+          <div className="text-xs text-dark-400 mb-1">Improvement</div>
+          <div className="text-xl font-bold text-primary-400 flex items-center gap-1">
+            {stats.improvement !== null ? (
+              <>
+                {stats.improvement > 0 ? <TrendingDown className="w-4 h-4" /> :
+                 stats.improvement < 0 ? <TrendingUp className="w-4 h-4" /> :
+                 <Minus className="w-4 h-4" />}
+                {Math.abs(stats.improvement).toFixed(1)}%
+              </>
+            ) : 'N/A'}
+          </div>
+        </div>
+      </div>
+
+      {/* Chart */}
+      <Plot
+        data={[chartData.trialCountData, chartData.bestValueData]}
+        layout={{
+          height,
+          margin: { l: 60, r: 60, t: 40, b: 100 },
+          paper_bgcolor: 'transparent',
+          plot_bgcolor: 'transparent',
+          font: { color: '#9ca3af', size: 11 },
+          showlegend: true,
+          legend: {
+            orientation: 'h',
+            y: 1.12,
+            x: 0.5,
+            xanchor: 'center',
+            bgcolor: 'transparent'
+          },
+          xaxis: {
+            tickangle: -45,
+            gridcolor: 'rgba(75, 85, 99, 0.3)',
+            linecolor: 'rgba(75, 85, 99, 0.5)',
+            tickfont: { size: 10 }
+          },
+          yaxis: {
+            title: { text: 'Trial Count' },
+            gridcolor: 'rgba(75, 85, 99, 0.3)',
+            linecolor: 'rgba(75, 85, 99, 0.5)',
+            zeroline: false
+          },
+          yaxis2: {
+            title: { text: 'Best Value' },
+            overlaying: 'y',
+            side: 'right',
+            gridcolor: 'rgba(75, 85, 99, 0.1)',
+            linecolor: 'rgba(75, 85, 99, 0.5)',
+            zeroline: false,
+            tickformat: '.2e'
+          },
+          bargap: 0.3,
+          hovermode: 'x unified'
+        }}
+        config={{
+          displayModeBar: true,
+          displaylogo: false,
+          modeBarButtonsToRemove: ['select2d', 'lasso2d', 'autoScale2d']
+        }}
+        className="w-full"
+        useResizeHandler
+        style={{ width: '100%' }}
+      />
+
+      {/* Runs Table */}
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-dark-600">
+              <th className="text-left py-2 px-3 text-dark-400 font-medium">Run Name</th>
+              <th className="text-left py-2 px-3 text-dark-400 font-medium">Source</th>
+              <th className="text-right py-2 px-3 text-dark-400 font-medium">Trials</th>
+              <th className="text-right py-2 px-3 text-dark-400 font-medium">Best Value</th>
+              <th className="text-right py-2 px-3 text-dark-400 font-medium">Avg Value</th>
+              <th className="text-left py-2 px-3 text-dark-400 font-medium">Duration</th>
+            </tr>
+          </thead>
+          <tbody>
+            {runs.map((run) => {
+              // Calculate duration if times available
+              let duration = '-';
+              if (run.first_trial && run.last_trial) {
+                const start = new Date(run.first_trial);
+                const end = new Date(run.last_trial);
+                const diffMs = end.getTime() - start.getTime();
+                const diffMins = Math.round(diffMs / 60000);
+                if (diffMins < 60) {
+                  duration = `${diffMins}m`;
+                } else {
+                  const hours = Math.floor(diffMins / 60);
+                  const mins = diffMins % 60;
+                  duration = `${hours}h ${mins}m`;
+                }
+              }
+
+              return (
+                <tr key={run.run_id} className="border-b border-dark-700 hover:bg-dark-750">
+                  <td className="py-2 px-3 font-mono text-white">{run.name}</td>
+                  <td className="py-2 px-3">
+                    <span className={`px-2 py-0.5 rounded text-xs ${
+                      run.source === 'NN'
+                        ? 'bg-purple-500/20 text-purple-400'
+                        : 'bg-blue-500/20 text-blue-400'
+                    }`}>
+                      {run.source}
+                    </span>
+                  </td>
+                  <td className="py-2 px-3 text-right font-mono text-white">{run.trial_count}</td>
+                  <td className="py-2 px-3 text-right font-mono text-green-400">
+                    {run.best_value !== null ? run.best_value.toExponential(4) : '-'}
+                  </td>
+                  <td className="py-2 px-3 text-right font-mono text-dark-300">
+                    {run.avg_value !== null ? run.avg_value.toExponential(4) : '-'}
+                  </td>
+                  <td className="py-2 px-3 text-dark-400">{duration}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default PlotlyRunComparison;

atomizer-dashboard/frontend/src/components/plotly/PlotlySurrogateQuality.tsx

@@ -0,0 +1,202 @@
+import { useMemo } from 'react';
+import Plot from 'react-plotly.js';
+
+interface TrialData {
+  trial_number: number;
+  values: number[];
+  source?: 'FEA' | 'NN' | 'V10_FEA';
+  user_attrs?: Record<string, any>;
+}
+
+interface PlotlySurrogateQualityProps {
+  trials: TrialData[];
+  height?: number;
+}
+
+export function PlotlySurrogateQuality({
+  trials,
+  height = 400
+}: PlotlySurrogateQualityProps) {
+  const { feaTrials, nnTrials, timeline } = useMemo(() => {
+    const fea = trials.filter(t => t.source === 'FEA' || t.source === 'V10_FEA');
+    const nn = trials.filter(t => t.source === 'NN');
+
+    // Sort by trial number for timeline
+    const sorted = [...trials].sort((a, b) => a.trial_number - b.trial_number);
+
+    // Calculate source distribution over time
+    const timeline: { trial: number; feaCount: number; nnCount: number }[] = [];
+    let feaCount = 0;
+    let nnCount = 0;
+
+    sorted.forEach(t => {
+      if (t.source === 'NN') nnCount++;
+      else feaCount++;
+
+      timeline.push({
+        trial: t.trial_number,
+        feaCount,
+        nnCount
+      });
+    });
+
+    return {
+      feaTrials: fea,
+      nnTrials: nn,
+      timeline
+    };
+  }, [trials]);
+
+  if (nnTrials.length === 0) {
+    return (
+      <div className="h-64 flex items-center justify-center text-dark-400">
+        <p>No neural network evaluations in this study</p>
+      </div>
+    );
+  }
+
+  // Objective distribution by source
+  const feaObjectives = feaTrials.map(t => t.values[0]).filter(v => v !== undefined && !isNaN(v));
+  const nnObjectives = nnTrials.map(t => t.values[0]).filter(v => v !== undefined && !isNaN(v));
+
+  return (
+    <div className="space-y-6">
+      {/* Source Distribution Over Time */}
+      <Plot
+        data={[
+          {
+            x: timeline.map(t => t.trial),
+            y: timeline.map(t => t.feaCount),
+            type: 'scatter',
+            mode: 'lines',
+            name: 'FEA Cumulative',
+            line: { color: '#3b82f6', width: 2 },
+            fill: 'tozeroy',
+            fillcolor: 'rgba(59, 130, 246, 0.2)'
+          },
+          {
+            x: timeline.map(t => t.trial),
+            y: timeline.map(t => t.nnCount),
+            type: 'scatter',
+            mode: 'lines',
+            name: 'NN Cumulative',
+            line: { color: '#a855f7', width: 2 },
+            fill: 'tozeroy',
+            fillcolor: 'rgba(168, 85, 247, 0.2)'
+          }
+        ]}
+        layout={{
+          title: {
+            text: 'Evaluation Source Over Time',
+            font: { color: '#fff', size: 14 }
+          },
+          height: height * 0.6,
+          margin: { l: 60, r: 30, t: 50, b: 50 },
+          paper_bgcolor: 'transparent',
+          plot_bgcolor: 'transparent',
+          xaxis: {
+            title: { text: 'Trial Number', font: { color: '#888' } },
+            tickfont: { color: '#888' },
+            gridcolor: 'rgba(255,255,255,0.05)'
+          },
+          yaxis: {
+            title: { text: 'Cumulative Count', font: { color: '#888' } },
+            tickfont: { color: '#888' },
+            gridcolor: 'rgba(255,255,255,0.1)'
+          },
+          legend: {
+            font: { color: '#888' },
+            bgcolor: 'rgba(0,0,0,0.5)',
+            orientation: 'h',
+            y: 1.1
+          },
+          showlegend: true
+        }}
+        config={{
+          displayModeBar: true,
+          modeBarButtonsToRemove: ['lasso2d', 'select2d'],
+          displaylogo: false
+        }}
+        style={{ width: '100%' }}
+      />
+
+      {/* Objective Distribution by Source */}
+      <Plot
+        data={[
+          {
+            x: feaObjectives,
+            type: 'histogram',
+            name: 'FEA',
+            marker: { color: 'rgba(59, 130, 246, 0.7)' },
+            opacity: 0.8
+          } as any,
+          {
+            x: nnObjectives,
+            type: 'histogram',
+            name: 'NN',
+            marker: { color: 'rgba(168, 85, 247, 0.7)' },
+            opacity: 0.8
+          } as any
+        ]}
+        layout={{
+          title: {
+            text: 'Objective Distribution by Source',
+            font: { color: '#fff', size: 14 }
+          },
+          height: height * 0.5,
+          margin: { l: 60, r: 30, t: 50, b: 50 },
+          paper_bgcolor: 'transparent',
+          plot_bgcolor: 'transparent',
+          xaxis: {
+            title: { text: 'Objective Value', font: { color: '#888' } },
+            tickfont: { color: '#888' },
+            gridcolor: 'rgba(255,255,255,0.05)'
+          },
+          yaxis: {
+            title: { text: 'Count', font: { color: '#888' } },
+            tickfont: { color: '#888' },
+            gridcolor: 'rgba(255,255,255,0.1)'
+          },
+          barmode: 'overlay',
+          legend: {
+            font: { color: '#888' },
+            bgcolor: 'rgba(0,0,0,0.5)',
+            orientation: 'h',
+            y: 1.1
+          },
+          showlegend: true
+        }}
+        config={{
+          displayModeBar: true,
+          modeBarButtonsToRemove: ['lasso2d', 'select2d'],
+          displaylogo: false
+        }}
+        style={{ width: '100%' }}
+      />
+
+      {/* FEA vs NN Best Values Comparison */}
+      {feaObjectives.length > 0 && nnObjectives.length > 0 && (
+        <div className="grid grid-cols-2 gap-4 mt-4">
+          <div className="bg-dark-750 rounded-lg p-4 border border-dark-600">
+            <div className="text-xs text-dark-400 uppercase mb-2">FEA Best</div>
+            <div className="text-xl font-mono text-blue-400">
+              {Math.min(...feaObjectives).toExponential(4)}
+            </div>
+            <div className="text-xs text-dark-500 mt-1">
+              from {feaObjectives.length} evaluations
+            </div>
+          </div>
+          <div className="bg-dark-750 rounded-lg p-4 border border-dark-600">
+            <div className="text-xs text-dark-400 uppercase mb-2">NN Best</div>
+            <div className="text-xl font-mono text-purple-400">
+              {Math.min(...nnObjectives).toExponential(4)}
+            </div>
+            <div className="text-xs text-dark-500 mt-1">
+              from {nnObjectives.length} predictions
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}