feat: Major update with validators, skills, dashboard, and docs reorganization

- Add validation framework (config, model, results, study validators) - Add Claude Code skills (create-study, run-optimization, generate-report, troubleshoot, analyze-model) - Add Atomizer Dashboard (React frontend + FastAPI backend) - Reorganize docs into structured directories (00-09) - Add neural surrogate modules and training infrastructure - Add multi-objective optimization support 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 19:23:58 -05:00
parent 74a92803b7
commit e3bdb08a22
155 changed files with 52729 additions and 37 deletions
--- a/atomizer-dashboard/frontend/src/components/Badge.tsx
+++ b/atomizer-dashboard/frontend/src/components/Badge.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+type BadgeVariant = 'success' | 'warning' | 'error' | 'info';
+
+interface BadgeProps {
+  children: React.ReactNode;
+  variant?: BadgeVariant;
+  className?: string;
+}
+
+const variantClasses: Record<BadgeVariant, string> = {
+  success: 'badge-success',
+  warning: 'badge-warning',
+  error: 'badge-error',
+  info: 'badge-info',
+};
+
+export function Badge({ children, variant = 'info', className = '' }: BadgeProps) {
+  return (
+    <span className={`${variantClasses[variant]} ${className}`}>
+      {children}
+    </span>
+  );
+}
--- a/atomizer-dashboard/frontend/src/components/Card.tsx
+++ b/atomizer-dashboard/frontend/src/components/Card.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+interface CardProps {
+  children: React.ReactNode;
+  className?: string;
+  title?: string | React.ReactNode;
+}
+
+export function Card({ children, className = '', title }: CardProps) {
+  return (
+    <div className={`card ${className}`}>
+      {title && <h2 className="text-xl font-bold mb-4 text-primary-400">{title}</h2>}
+      {children}
+    </div>
+  );
+}
--- a/atomizer-dashboard/frontend/src/components/MetricCard.tsx
+++ b/atomizer-dashboard/frontend/src/components/MetricCard.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface MetricCardProps {
+  label: string;
+  value: string | number;
+  className?: string;
+  valueColor?: string;
+}
+
+export function MetricCard({ label, value, className = '', valueColor = 'text-primary-400' }: MetricCardProps) {
+  return (
+    <div className={`bg-dark-500 rounded-lg p-4 ${className}`}>
+      <div className="text-sm text-dark-200 mb-1">{label}</div>
+      <div className={`text-2xl font-bold ${valueColor}`}>{value}</div>
+    </div>
+  );
+}
--- a/atomizer-dashboard/frontend/src/components/ParallelCoordinatesPlot.tsx
+++ b/atomizer-dashboard/frontend/src/components/ParallelCoordinatesPlot.tsx
@@ -39,17 +39,22 @@ interface ParallelCoordinatesPlotProps {
  objectives: Objective[];
  designVariables: DesignVariable[];
  constraints?: Constraint[];
+  paretoFront?: ParetoTrial[];
 }

 export function ParallelCoordinatesPlot({
  paretoData,
  objectives,
  designVariables,
-  constraints = []
+  constraints = [],
+  paretoFront = []
 }: ParallelCoordinatesPlotProps) {
  const [hoveredTrial, setHoveredTrial] = useState<number | null>(null);
  const [selectedTrials, setSelectedTrials] = useState<Set<number>>(new Set());

+  // Create set of Pareto front trial numbers for easy lookup
+  const paretoTrialNumbers = new Set(paretoFront.map(t => t.trial_number));
+
  // Safety checks
  if (!paretoData || paretoData.length === 0) {
    return (
@@ -83,9 +88,10 @@ export function ParallelCoordinatesPlot({

  // Add design variables
  designVariables.forEach(dv => {
+    const paramName = dv.parameter || dv.name;  // Support both formats
    axes.push({
-      name: dv.name,
-      label: dv.unit ? `${dv.name}\n(${dv.unit})` : dv.name,
+      name: paramName,
+      label: dv.unit ? `${paramName}\n(${dv.unit})` : paramName,
      type: 'design_var',
      unit: dv.unit
    });
@@ -134,9 +140,10 @@ export function ParallelCoordinatesPlot({
  const trialData = paretoData.map(trial => {
    const values: number[] = [];

-    // Design variables
+    // Design variables - use .parameter field from metadata
    designVariables.forEach(dv => {
-      values.push(trial.params[dv.name] ?? 0);
+      const paramName = dv.parameter || dv.name;  // Support both formats
+      values.push(trial.params[paramName] ?? 0);
    });

    // Objectives
@@ -152,10 +159,32 @@ export function ParallelCoordinatesPlot({
    return {
      trial_number: trial.trial_number,
      values,
-      feasible: trial.constraint_satisfied !== false
+      feasible: trial.constraint_satisfied !== false,
+      objectiveValues: trial.values || []
    };
  });

+  // Rank trials by their first objective (for multi-objective, this is just one metric)
+  // For proper multi-objective ranking, we use Pareto dominance
+  const rankedTrials = [...trialData].sort((a, b) => {
+    // Primary: Pareto front members come first
+    const aIsPareto = paretoTrialNumbers.has(a.trial_number);
+    const bIsPareto = paretoTrialNumbers.has(b.trial_number);
+    if (aIsPareto && !bIsPareto) return -1;
+    if (!aIsPareto && bIsPareto) return 1;
+
+    // Secondary: Sort by first objective value (minimize assumed)
+    const aObj = a.objectiveValues[0] ?? Infinity;
+    const bObj = b.objectiveValues[0] ?? Infinity;
+    return aObj - bObj;
+  });
+
+  // Create ranking map: trial_number -> rank (0-indexed)
+  const trialRanks = new Map<number, number>();
+  rankedTrials.forEach((trial, index) => {
+    trialRanks.set(trial.trial_number, index);
+  });
+
  // Calculate min/max for normalization
  const ranges = axes.map((_, axisIdx) => {
    const values = trialData.map(d => d.values[axisIdx]);
@@ -192,12 +221,26 @@ export function ParallelCoordinatesPlot({
    setSelectedTrials(newSelected);
  };

-  // Color scheme - highly visible
+  // Color scheme - gradient grayscale for top 10, light gray for rest
  const getLineColor = (trial: typeof trialData[0], isHovered: boolean, isSelected: boolean) => {
    if (isSelected) return '#FF6B00'; // Bright orange for selected
-    if (!trial.feasible) return '#DC2626'; // Red for infeasible
    if (isHovered) return '#2563EB'; // Blue for hover
-    return '#10B981'; // Green for feasible
+    if (!trial.feasible) return '#DC2626'; // Red for infeasible
+
+    const rank = trialRanks.get(trial.trial_number) ?? 999;
+
+    // Top 10: Gradient from dark gray (#374151) to light gray (#9CA3AF)
+    if (rank < 10) {
+      // Interpolate: rank 0 = darkest, rank 9 = lighter
+      const t = rank / 9; // 0 to 1
+      const r = Math.round(55 + t * (156 - 55));  // 55 to 156
+      const g = Math.round(65 + t * (163 - 65));  // 65 to 163
+      const b = Math.round(81 + t * (175 - 81));  // 81 to 175
+      return `rgb(${r}, ${g}, ${b})`;
+    }
+
+    // Remaining trials: Very light gray
+    return '#D1D5DB'; // Very light gray
  };

  return (
@@ -371,8 +414,12 @@ export function ParallelCoordinatesPlot({
      {/* Legend */}
      <div className="flex gap-8 justify-center mt-6 text-sm border-t border-gray-200 pt-4">
        <div className="flex items-center gap-2">
-          <div className="w-10 h-1" style={{ backgroundColor: '#10B981' }} />
-          <span className="text-gray-700 font-medium">Feasible</span>
+          <div className="w-10 h-1" style={{ background: 'linear-gradient(to right, #374151, #9CA3AF)' }} />
+          <span className="text-gray-700 font-medium">Top 10 (gradient)</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-10 h-1" style={{ backgroundColor: '#D1D5DB' }} />
+          <span className="text-gray-700 font-medium">Others</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-10 h-1" style={{ backgroundColor: '#DC2626' }} />
--- a/atomizer-dashboard/frontend/src/components/ParetoPlot.tsx
+++ b/atomizer-dashboard/frontend/src/components/ParetoPlot.tsx
@@ -22,14 +22,18 @@ interface Objective {
 interface ParetoPlotProps {
  paretoData: ParetoTrial[];
  objectives: Objective[];
+  allTrials?: ParetoTrial[]; // All trials including non-Pareto
 }

 type NormalizationMode = 'raw' | 'minmax' | 'zscore';

-export function ParetoPlot({ paretoData, objectives }: ParetoPlotProps) {
+export function ParetoPlot({ paretoData, objectives, allTrials }: ParetoPlotProps) {
  const [normMode, setNormMode] = useState<NormalizationMode>('raw');

-  if (paretoData.length === 0) {
+  // Use allTrials if provided, otherwise fall back to paretoData
+  const trialsToShow = allTrials && allTrials.length > 0 ? allTrials : paretoData;
+
+  if (trialsToShow.length === 0) {
    return (
      <div className="bg-dark-700 rounded-lg p-6 border border-dark-600">
        <h3 className="text-lg font-semibold mb-4 text-dark-100">Pareto Front</h3>
@@ -40,12 +44,16 @@ export function ParetoPlot({ paretoData, objectives }: ParetoPlotProps) {
    );
  }

-  // Extract raw values
-  const rawData = paretoData.map(trial => ({
+  // Create set of Pareto front trial numbers for easy lookup
+  const paretoTrialNumbers = new Set(paretoData.map(t => t.trial_number));
+
+  // Extract raw values for ALL trials
+  const rawData = trialsToShow.map(trial => ({
    x: trial.values[0],
    y: trial.values[1],
    trial_number: trial.trial_number,
-    feasible: trial.constraint_satisfied !== false
+    feasible: trial.constraint_satisfied !== false,
+    isPareto: paretoTrialNumbers.has(trial.trial_number)
  }));

  // Calculate statistics for normalization
@@ -89,11 +97,12 @@ export function ParetoPlot({ paretoData, objectives }: ParetoPlotProps) {
    rawX: d.x,
    rawY: d.y,
    trial_number: d.trial_number,
-    feasible: d.feasible
+    feasible: d.feasible,
+    isPareto: d.isPareto
  }));

-  // Sort data by x-coordinate for Pareto front line
-  const sortedData = [...data].sort((a, b) => a.x - b.x);
+  // Sort ONLY Pareto front data by x-coordinate for line
+  const paretoOnlyData = data.filter(d => d.isPareto).sort((a, b) => a.x - b.x);

  // Get objective labels with normalization indicator
  const normSuffix = normMode === 'minmax' ? ' [0-1]' : normMode === 'zscore' ? ' [z-score]' : '';
@@ -219,24 +228,29 @@ export function ParetoPlot({ paretoData, objectives }: ParetoPlotProps) {
              </div>
            )}
          />
-          {/* Pareto front line */}
+          {/* Pareto front line - only connects Pareto front points */}
          <Line
            type="monotone"
-            data={sortedData}
+            data={paretoOnlyData}
            dataKey="y"
            stroke="#8b5cf6"
-            strokeWidth={2}
+            strokeWidth={3}
            dot={false}
            connectNulls={false}
            isAnimationActive={false}
          />
-          <Scatter name="Pareto Front" data={data}>
+          {/* All trials as scatter points */}
+          <Scatter name="All Trials" data={data}>
            {data.map((entry, index) => (
              <Cell
                key={`cell-${index}`}
-                fill={entry.feasible ? '#10b981' : '#ef4444'}
-                r={entry.feasible ? 6 : 4}
-                opacity={entry.feasible ? 1 : 0.6}
+                fill={
+                  entry.isPareto
+                    ? (entry.feasible ? '#10b981' : '#ef4444')  // Pareto: green/red
+                    : (entry.feasible ? '#64748b' : '#94a3b8')   // Non-Pareto: gray tones
+                }
+                r={entry.isPareto ? 7 : 4}
+                opacity={entry.isPareto ? 1 : 0.4}
              />
            ))}
          </Scatter>
--- a/atomizer-dashboard/frontend/src/components/StudyCard.tsx
+++ b/atomizer-dashboard/frontend/src/components/StudyCard.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import type { Study } from '../types';
+import { Badge } from './Badge';
+
+interface StudyCardProps {
+  study: Study;
+  isActive: boolean;
+  onClick: () => void;
+}
+
+export function StudyCard({ study, isActive, onClick }: StudyCardProps) {
+  const percentage = study.progress.total > 0
+    ? (study.progress.current / study.progress.total) * 100
+    : 0;
+
+  const statusVariant = study.status === 'completed'
+    ? 'success'
+    : study.status === 'running'
+    ? 'info'
+    : 'warning';
+
+  return (
+    <div
+      className={`p-4 rounded-lg cursor-pointer transition-all duration-200 ${
+        isActive
+          ? 'bg-primary-900 border-l-4 border-primary-400'
+          : 'bg-dark-500 hover:bg-dark-400'
+      }`}
+      onClick={onClick}
+    >
+      <div className="flex items-start justify-between mb-2">
+        <h3 className="font-semibold text-dark-50 text-sm">{study.name}</h3>
+        <Badge variant={statusVariant}>
+          {study.status}
+        </Badge>
+      </div>
+
+      <div className="text-xs text-dark-200 mb-2">
+        {study.progress.current} / {study.progress.total} trials
+        {study.best_value !== null && (
+          <span className="ml-2">• Best: {study.best_value.toFixed(4)}</span>
+        )}
+      </div>
+
+      <div className="w-full h-2 bg-dark-700 rounded-full overflow-hidden">
+        <div
+          className="h-full bg-gradient-to-r from-primary-600 to-primary-400 transition-all duration-300"
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  );
+}
--- a/atomizer-dashboard/frontend/src/components/common/Button.tsx
+++ b/atomizer-dashboard/frontend/src/components/common/Button.tsx
@@ -0,0 +1,51 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import clsx from 'clsx';
+import { Loader2 } from 'lucide-react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  isLoading?: boolean;
+  icon?: ReactNode;
+}
+
+export const Button = ({
+  children,
+  className,
+  variant = 'primary',
+  size = 'md',
+  isLoading = false,
+  icon,
+  disabled,
+  ...props
+}: ButtonProps) => {
+  const variants = {
+    primary: 'bg-primary-600 hover:bg-primary-700 text-white shadow-sm',
+    secondary: 'bg-dark-700 hover:bg-dark-600 text-dark-100 border border-dark-600',
+    danger: 'bg-red-600 hover:bg-red-700 text-white',
+    ghost: 'hover:bg-dark-700 text-dark-300 hover:text-white',
+  };
+
+  const sizes = {
+    sm: 'px-3 py-1.5 text-sm',
+    md: 'px-4 py-2',
+    lg: 'px-6 py-3 text-lg',
+  };
+
+  return (
+    <button
+      className={clsx(
+        'inline-flex items-center justify-center rounded-lg font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
+        variants[variant],
+        sizes[size],
+        className
+      )}
+      disabled={disabled || isLoading}
+      {...props}
+    >
+      {isLoading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+      {!isLoading && icon && <span className="mr-2">{icon}</span>}
+      {children}
+    </button>
+  );
+};
--- a/atomizer-dashboard/frontend/src/components/common/Card.tsx
+++ b/atomizer-dashboard/frontend/src/components/common/Card.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import clsx from 'clsx';
+
+interface CardProps {
+  title?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export const Card = ({ title, children, className }: CardProps) => {
+  return (
+    <div className={clsx('bg-dark-800 rounded-xl border border-dark-600 shadow-sm overflow-hidden', className)}>
+      {title && (
+        <div className="px-6 py-4 border-b border-dark-600">
+          <h3 className="text-lg font-semibold text-white">{title}</h3>
+        </div>
+      )}
+      <div className="p-6">{children}</div>
+    </div>
+  );
+};
--- a/atomizer-dashboard/frontend/src/components/common/Input.tsx
+++ b/atomizer-dashboard/frontend/src/components/common/Input.tsx
@@ -0,0 +1,39 @@
+import { InputHTMLAttributes, forwardRef } from 'react';
+import clsx from 'clsx';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, label, error, helperText, ...props }, ref) => {
+    return (
+      <div className="w-full">
+        {label && (
+          <label className="block text-sm font-medium text-dark-200 mb-1.5">
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          className={clsx(
+            'w-full bg-dark-800 border rounded-lg px-3 py-2 text-dark-50 placeholder-dark-400 focus:outline-none focus:ring-2 focus:ring-primary-500/50 transition-all duration-200',
+            error
+              ? 'border-red-500 focus:border-red-500'
+              : 'border-dark-600 focus:border-primary-500',
+            className
+          )}
+          {...props}
+        />
+        {error && <p className="mt-1 text-sm text-red-400">{error}</p>}
+        {helperText && !error && (
+          <p className="mt-1 text-sm text-dark-400">{helperText}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
--- a/atomizer-dashboard/frontend/src/components/dashboard/MeshViewer.tsx
+++ b/atomizer-dashboard/frontend/src/components/dashboard/MeshViewer.tsx
@@ -0,0 +1,79 @@
+import { useRef, useState, Suspense } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { OrbitControls, Stage, useGLTF } from '@react-three/drei';
+import { Card } from '../common/Card';
+import { Button } from '../common/Button';
+import { Maximize2, RotateCcw } from 'lucide-react';
+
+// Placeholder component for the mesh
+// In a real implementation, this would load the GLTF/OBJ file converted from Nastran
+const Model = ({ path }: { path?: string }) => {
+  // For now, we'll render a simple box to demonstrate the viewer
+  const meshRef = useRef<any>();
+  
+  useFrame((state, delta) => {
+    if (meshRef.current) {
+      meshRef.current.rotation.y += delta * 0.2;
+    }
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <boxGeometry args={[2, 2, 2]} />
+      <meshStandardMaterial color="#60a5fa" wireframe />
+    </mesh>
+  );
+};
+
+interface MeshViewerProps {
+  modelPath?: string;
+  resultField?: string;
+}
+
+export const MeshViewer = ({ modelPath, resultField }: MeshViewerProps) => {
+  const [autoRotate, setAutoRotate] = useState(true);
+
+  return (
+    <Card title="3D Result Viewer" className="h-full flex flex-col">
+      <div className="relative flex-1 min-h-[400px] bg-dark-900 rounded-lg overflow-hidden border border-dark-700">
+        <Canvas shadows dpr={[1, 2]} camera={{ fov: 50 }}>
+          <Suspense fallback={null}>
+            <Stage environment="city" intensity={0.6}>
+              <Model path={modelPath} />
+            </Stage>
+          </Suspense>
+          <OrbitControls autoRotate={autoRotate} />
+        </Canvas>
+        
+        {/* Controls Overlay */}
+        <div className="absolute bottom-4 right-4 flex gap-2">
+          <Button 
+            size="sm" 
+            variant="secondary" 
+            onClick={() => setAutoRotate(!autoRotate)}
+            icon={<RotateCcw className={`w-4 h-4 ${autoRotate ? 'animate-spin' : ''}`} />}
+          >
+            {autoRotate ? 'Stop Rotation' : 'Auto Rotate'}
+          </Button>
+          <Button 
+            size="sm" 
+            variant="secondary" 
+            icon={<Maximize2 className="w-4 h-4" />}
+          >
+            Fullscreen
+          </Button>
+        </div>
+
+        {/* Legend Overlay */}
+        <div className="absolute top-4 left-4 bg-dark-800/80 p-3 rounded-lg backdrop-blur-sm border border-dark-600">
+          <div className="text-xs font-medium text-dark-300 mb-2">Displacement (mm)</div>
+          <div className="h-32 w-4 bg-gradient-to-t from-blue-500 via-green-500 to-red-500 rounded-full mx-auto" />
+          <div className="flex justify-between text-[10px] text-dark-400 mt-1 w-12">
+            <span>0.0</span>
+            <span>5.2</span>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};
--- a/atomizer-dashboard/frontend/src/components/dashboard/MetricCard.tsx
+++ b/atomizer-dashboard/frontend/src/components/dashboard/MetricCard.tsx
@@ -0,0 +1,23 @@
+import { Card } from '../common/Card';
+import clsx from 'clsx';
+
+interface MetricCardProps {
+  label: string;
+  value: string | number;
+  valueColor?: string;
+  subtext?: string;
+}
+
+export const MetricCard = ({ label, value, valueColor = 'text-white', subtext }: MetricCardProps) => {
+  return (
+    <Card className="h-full">
+      <div className="flex flex-col h-full justify-between">
+        <span className="text-sm font-medium text-dark-300 uppercase tracking-wider">{label}</span>
+        <div className="mt-2">
+          <span className={clsx('text-3xl font-bold tracking-tight', valueColor)}>{value}</span>
+          {subtext && <p className="text-xs text-dark-400 mt-1">{subtext}</p>}
+        </div>
+      </div>
+    </Card>
+  );
+};
--- a/atomizer-dashboard/frontend/src/components/dashboard/ParallelCoordinatesPlot.tsx
+++ b/atomizer-dashboard/frontend/src/components/dashboard/ParallelCoordinatesPlot.tsx
@@ -0,0 +1,138 @@
+import { Card } from '../common/Card';
+
+interface ParallelCoordinatesPlotProps {
+  data: any[];
+  dimensions: string[];
+  colorBy?: string;
+}
+
+export const ParallelCoordinatesPlot = ({ data, dimensions }: ParallelCoordinatesPlotProps) => {
+  // Filter out null/undefined data points
+  const validData = data.filter(d => d && dimensions.every(dim => d[dim] !== null && d[dim] !== undefined));
+
+  if (validData.length === 0 || dimensions.length === 0) {
+    return (
+      <Card title="Parallel Coordinates">
+        <div className="h-80 flex items-center justify-center text-dark-300">
+          No data available for parallel coordinates
+        </div>
+      </Card>
+    );
+  }
+
+  // Calculate min/max for each dimension for normalization
+  const ranges = dimensions.map(dim => {
+    const values = validData.map(d => d[dim]);
+    return {
+      min: Math.min(...values),
+      max: Math.max(...values)
+    };
+  });
+
+  // Normalize function
+  const normalize = (value: number, dimIdx: number): number => {
+    const range = ranges[dimIdx];
+    if (range.max === range.min) return 0.5;
+    return (value - range.min) / (range.max - range.min);
+  };
+
+  // Chart dimensions
+  const width = 800;
+  const height = 400;
+  const margin = { top: 80, right: 20, bottom: 40, left: 20 };
+  const plotWidth = width - margin.left - margin.right;
+  const plotHeight = height - margin.top - margin.bottom;
+
+  const axisSpacing = plotWidth / (dimensions.length - 1);
+
+  return (
+    <Card title={`Parallel Coordinates (${validData.length} solutions)`}>
+      <svg width={width} height={height} className="overflow-visible">
+        <g transform={`translate(${margin.left}, ${margin.top})`}>
+          {/* Draw axes */}
+          {dimensions.map((dim, i) => {
+            const x = i * axisSpacing;
+            return (
+              <g key={dim} transform={`translate(${x}, 0)`}>
+                {/* Axis line */}
+                <line
+                  y1={0}
+                  y2={plotHeight}
+                  stroke="#475569"
+                  strokeWidth={2}
+                />
+
+                {/* Axis label */}
+                <text
+                  y={-10}
+                  textAnchor="middle"
+                  fill="#94a3b8"
+                  fontSize={12}
+                  className="select-none"
+                  transform={`rotate(-45, 0, -10)`}
+                >
+                  {dim}
+                </text>
+
+                {/* Min/max labels */}
+                <text
+                  y={plotHeight + 15}
+                  textAnchor="middle"
+                  fill="#64748b"
+                  fontSize={10}
+                >
+                  {ranges[i].min.toFixed(2)}
+                </text>
+                <text
+                  y={-25}
+                  textAnchor="middle"
+                  fill="#64748b"
+                  fontSize={10}
+                >
+                  {ranges[i].max.toFixed(2)}
+                </text>
+              </g>
+            );
+          })}
+
+          {/* Draw lines for each trial */}
+          {validData.map((trial, trialIdx) => {
+            // Build path
+            const pathData = dimensions.map((dim, i) => {
+              const x = i * axisSpacing;
+              const normalizedY = normalize(trial[dim], i);
+              const y = plotHeight * (1 - normalizedY);
+              return i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`;
+            }).join(' ');
+
+            return (
+              <path
+                key={trialIdx}
+                d={pathData}
+                fill="none"
+                stroke={trial.isPareto !== false ? '#10b981' : '#60a5fa'}
+                strokeWidth={1}
+                opacity={0.4}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="transition-all duration-200"
+              />
+            );
+          })}
+        </g>
+      </svg>
+
+      {/* Legend */}
+      <div className="flex gap-6 justify-center mt-4 text-sm">
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-0.5 bg-green-400" />
+          <span className="text-dark-200">Pareto Front</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-0.5 bg-blue-400" />
+          <span className="text-dark-200">Other Solutions</span>
+        </div>
+      </div>
+    </Card>
+  );
+};
--- a/atomizer-dashboard/frontend/src/components/dashboard/ParetoPlot.tsx
+++ b/atomizer-dashboard/frontend/src/components/dashboard/ParetoPlot.tsx
@@ -0,0 +1,85 @@
+import { ResponsiveContainer, ScatterChart, Scatter, XAxis, YAxis, ZAxis, Tooltip, Cell, CartesianGrid, Line } from 'recharts';
+import { Card } from '../common/Card';
+
+interface ParetoPlotProps {
+  data: any[];
+  xKey: string;
+  yKey: string;
+  zKey?: string;
+}
+
+export const ParetoPlot = ({ data, xKey, yKey, zKey }: ParetoPlotProps) => {
+  // Filter out null/undefined data points
+  const validData = data.filter(d =>
+    d &&
+    d[xKey] !== null && d[xKey] !== undefined &&
+    d[yKey] !== null && d[yKey] !== undefined
+  );
+
+  if (validData.length === 0) {
+    return (
+      <Card title="Pareto Front Evolution">
+        <div className="h-80 flex items-center justify-center text-dark-300">
+          No Pareto front data yet
+        </div>
+      </Card>
+    );
+  }
+
+  // Sort data by x-coordinate for Pareto front line
+  const sortedData = [...validData].sort((a, b) => a[xKey] - b[xKey]);
+
+  return (
+    <Card title="Pareto Front Evolution">
+      <div className="h-80">
+        <ResponsiveContainer width="100%" height="100%">
+          <ScatterChart margin={{ top: 20, right: 20, bottom: 40, left: 60 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+            <XAxis
+              type="number"
+              dataKey={xKey}
+              name={xKey}
+              stroke="#94a3b8"
+              label={{ value: xKey, position: 'insideBottom', offset: -30, fill: '#94a3b8' }}
+            />
+            <YAxis
+              type="number"
+              dataKey={yKey}
+              name={yKey}
+              stroke="#94a3b8"
+              label={{ value: yKey, angle: -90, position: 'insideLeft', offset: -40, fill: '#94a3b8' }}
+            />
+            {zKey && <ZAxis type="number" dataKey={zKey} range={[50, 400]} name={zKey} />}
+            <Tooltip
+              cursor={{ strokeDasharray: '3 3' }}
+              contentStyle={{ backgroundColor: '#1e293b', border: 'none', borderRadius: '8px' }}
+              labelStyle={{ color: '#e2e8f0' }}
+              formatter={(value: any) => {
+                if (typeof value === 'number') {
+                  return value.toFixed(2);
+                }
+                return value;
+              }}
+            />
+            {/* Pareto front line */}
+            <Line
+              type="monotone"
+              data={sortedData}
+              dataKey={yKey}
+              stroke="#8b5cf6"
+              strokeWidth={2}
+              dot={false}
+              connectNulls={false}
+              isAnimationActive={false}
+            />
+            <Scatter name="Pareto Front" data={validData} fill="#8884d8">
+              {validData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.isPareto !== false ? '#10b981' : '#60a5fa'} r={6} />
+              ))}
+            </Scatter>
+          </ScatterChart>
+        </ResponsiveContainer>
+      </div>
+    </Card>
+  );
+};
--- a/atomizer-dashboard/frontend/src/components/dashboard/ReportBuilder.tsx
+++ b/atomizer-dashboard/frontend/src/components/dashboard/ReportBuilder.tsx
@@ -0,0 +1,120 @@
+import { useState } from 'react';
+import { Card } from '../common/Card';
+import { Button } from '../common/Button';
+import { Input } from '../common/Input';
+import { FileText, Download, Plus, Trash2, MoveUp, MoveDown } from 'lucide-react';
+
+interface ReportSection {
+  id: string;
+  type: 'text' | 'chart' | 'table' | 'image';
+  title: string;
+  content: string;
+}
+
+export const ReportBuilder = () => {
+  const [sections, setSections] = useState<ReportSection[]>([
+    { id: '1', type: 'text', title: 'Executive Summary', content: 'The optimization study successfully converged...' },
+    { id: '2', type: 'chart', title: 'Convergence Plot', content: 'convergence_plot' },
+    { id: '3', type: 'table', title: 'Top 10 Designs', content: 'top_designs_table' },
+  ]);
+
+  const addSection = (type: ReportSection['type']) => {
+    setSections([
+      ...sections,
+      { id: Date.now().toString(), type, title: 'New Section', content: '' }
+    ]);
+  };
+
+  const removeSection = (id: string) => {
+    setSections(sections.filter(s => s.id !== id));
+  };
+
+  const moveSection = (index: number, direction: 'up' | 'down') => {
+    if (direction === 'up' && index === 0) return;
+    if (direction === 'down' && index === sections.length - 1) return;
+    
+    const newSections = [...sections];
+    const targetIndex = direction === 'up' ? index - 1 : index + 1;
+    [newSections[index], newSections[targetIndex]] = [newSections[targetIndex], newSections[index]];
+    setSections(newSections);
+  };
+
+  const updateSection = (id: string, field: keyof ReportSection, value: string) => {
+    setSections(sections.map(s => s.id === id ? { ...s, [field]: value } : s));
+  };
+
+  return (
+    <div className="grid grid-cols-12 gap-6 h-full">
+      {/* Editor Sidebar */}
+      <div className="col-span-4 flex flex-col gap-4">
+        <Card title="Report Structure" className="flex-1 flex flex-col">
+          <div className="flex-1 overflow-y-auto space-y-3 pr-2">
+            {sections.map((section, index) => (
+              <div key={section.id} className="bg-dark-900/50 p-3 rounded-lg border border-dark-700 group">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-xs font-medium text-primary-400 uppercase">{section.type}</span>
+                  <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button onClick={() => moveSection(index, 'up')} className="p-1 hover:bg-dark-700 rounded"><MoveUp className="w-3 h-3" /></button>
+                    <button onClick={() => moveSection(index, 'down')} className="p-1 hover:bg-dark-700 rounded"><MoveDown className="w-3 h-3" /></button>
+                    <button onClick={() => removeSection(section.id)} className="p-1 hover:bg-red-900/50 text-red-400 rounded"><Trash2 className="w-3 h-3" /></button>
+                  </div>
+                </div>
+                <Input 
+                  value={section.title} 
+                  onChange={(e) => updateSection(section.id, 'title', e.target.value)}
+                  className="mb-2 text-sm"
+                />
+                {section.type === 'text' && (
+                  <textarea 
+                    className="w-full bg-dark-800 border border-dark-600 rounded-md p-2 text-xs text-dark-100 focus:outline-none focus:border-primary-500 resize-none h-20"
+                    value={section.content}
+                    onChange={(e) => updateSection(section.id, 'content', e.target.value)}
+                    placeholder="Enter content..."
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+          
+          <div className="mt-4 pt-4 border-t border-dark-600 grid grid-cols-2 gap-2">
+            <Button size="sm" variant="secondary" onClick={() => addSection('text')} icon={<Plus className="w-3 h-3" />}>Text</Button>
+            <Button size="sm" variant="secondary" onClick={() => addSection('chart')} icon={<Plus className="w-3 h-3" />}>Chart</Button>
+            <Button size="sm" variant="secondary" onClick={() => addSection('table')} icon={<Plus className="w-3 h-3" />}>Table</Button>
+            <Button size="sm" variant="secondary" onClick={() => addSection('image')} icon={<Plus className="w-3 h-3" />}>Image</Button>
+          </div>
+        </Card>
+      </div>
+
+      {/* Preview Area */}
+      <div className="col-span-8 flex flex-col gap-4">
+        <Card className="flex-1 flex flex-col bg-white text-black overflow-hidden">
+          <div className="flex items-center justify-between border-b border-gray-200 pb-4 mb-6">
+            <h2 className="text-2xl font-bold text-gray-900">Optimization Report Preview</h2>
+            <Button size="sm" icon={<Download className="w-4 h-4" />}>Export PDF</Button>
+          </div>
+          
+          <div className="flex-1 overflow-y-auto pr-4 space-y-8">
+            {sections.map(section => (
+              <div key={section.id}>
+                <h3 className="text-xl font-semibold text-gray-800 mb-3">{section.title}</h3>
+                {section.type === 'text' && (
+                  <p className="text-gray-600 leading-relaxed">{section.content}</p>
+                )}
+                {section.type === 'chart' && (
+                  <div className="h-64 bg-gray-100 rounded-lg flex items-center justify-center border border-gray-200 border-dashed">
+                    <span className="text-gray-400 font-medium">[Chart Placeholder: {section.content}]</span>
+                  </div>
+                )}
+                {section.type === 'table' && (
+                  <div className="h-32 bg-gray-100 rounded-lg flex items-center justify-center border border-gray-200 border-dashed">
+                    <span className="text-gray-400 font-medium">[Table Placeholder: {section.content}]</span>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+};
--- a/atomizer-dashboard/frontend/src/components/dashboard/StudyCard.tsx
+++ b/atomizer-dashboard/frontend/src/components/dashboard/StudyCard.tsx
@@ -0,0 +1,59 @@
+import { Study } from '../../types';
+import clsx from 'clsx';
+import { Play, CheckCircle, Clock } from 'lucide-react';
+
+interface StudyCardProps {
+  study: Study;
+  isActive: boolean;
+  onClick: () => void;
+}
+
+export const StudyCard = ({ study, isActive, onClick }: StudyCardProps) => {
+  const getStatusIcon = () => {
+    switch (study.status) {
+      case 'running':
+        return <Play className="w-4 h-4 text-green-400 animate-pulse" />;
+      case 'completed':
+        return <CheckCircle className="w-4 h-4 text-blue-400" />;
+      default:
+        return <Clock className="w-4 h-4 text-dark-400" />;
+    }
+  };
+
+  return (
+    <div
+      onClick={onClick}
+      className={clsx(
+        'p-4 rounded-lg border cursor-pointer transition-all duration-200',
+        isActive
+          ? 'bg-primary-900/20 border-primary-500/50 shadow-md'
+          : 'bg-dark-800 border-dark-600 hover:bg-dark-700 hover:border-dark-500'
+      )}
+    >
+      <div className="flex items-start justify-between mb-2">
+        <h4 className={clsx('font-medium truncate pr-2', isActive ? 'text-primary-100' : 'text-dark-100')}>
+          {study.name}
+        </h4>
+        {getStatusIcon()}
+      </div>
+      
+      <div className="flex items-center justify-between text-xs text-dark-300">
+        <span>{study.status}</span>
+        <span>
+          {study.progress.current} / {study.progress.total} trials
+        </span>
+      </div>
+      
+      {/* Progress Bar */}
+      <div className="mt-3 h-1.5 w-full bg-dark-700 rounded-full overflow-hidden">
+        <div 
+          className={clsx(
+            "h-full rounded-full transition-all duration-500",
+            study.status === 'completed' ? 'bg-blue-500' : 'bg-green-500'
+          )}
+          style={{ width: `${(study.progress.current / study.progress.total) * 100}%` }}
+        />
+      </div>
+    </div>
+  );
+};
--- a/atomizer-dashboard/frontend/src/components/layout/MainLayout.tsx
+++ b/atomizer-dashboard/frontend/src/components/layout/MainLayout.tsx
@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom';
+import { Sidebar } from './Sidebar';
+
+export const MainLayout = () => {
+  return (
+    <div className="min-h-screen bg-dark-900 text-dark-50 font-sans">
+      <Sidebar />
+      <main className="ml-64 min-h-screen">
+        <div className="max-w-7xl mx-auto p-8">
+          <Outlet />
+        </div>
+      </main>
+    </div>
+  );
+};
--- a/atomizer-dashboard/frontend/src/components/layout/Sidebar.tsx
+++ b/atomizer-dashboard/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,55 @@
+import { NavLink } from 'react-router-dom';
+import { LayoutDashboard, Settings, FileText, Activity } from 'lucide-react';
+import clsx from 'clsx';
+
+export const Sidebar = () => {
+  const navItems = [
+    { to: '/dashboard', icon: Activity, label: 'Live Dashboard' },
+    { to: '/configurator', icon: Settings, label: 'Configurator' },
+    { to: '/results', icon: FileText, label: 'Results Viewer' },
+  ];
+
+  return (
+    <aside className="w-64 bg-dark-800 border-r border-dark-600 flex flex-col h-screen fixed left-0 top-0">
+      <div className="p-6 border-b border-dark-600">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
+            <LayoutDashboard className="w-5 h-5 text-white" />
+          </div>
+          <h1 className="text-xl font-bold text-white tracking-tight">Atomizer</h1>
+        </div>
+        <p className="text-xs text-dark-300 mt-1 ml-11">Optimization Platform</p>
+      </div>
+
+      <nav className="flex-1 p-4 space-y-1">
+        {navItems.map((item) => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            className={({ isActive }) =>
+              clsx(
+                'flex items-center gap-3 px-4 py-3 rounded-lg transition-colors duration-200',
+                isActive
+                  ? 'bg-primary-900/50 text-primary-100 border border-primary-700/50'
+                  : 'text-dark-300 hover:bg-dark-700 hover:text-white'
+              )
+            }
+          >
+            <item.icon className="w-5 h-5" />
+            <span className="font-medium">{item.label}</span>
+          </NavLink>
+        ))}
+      </nav>
+
+      <div className="p-4 border-t border-dark-600">
+        <div className="bg-dark-700 rounded-lg p-4">
+          <div className="text-xs font-medium text-dark-400 uppercase mb-2">System Status</div>
+          <div className="flex items-center gap-2 text-sm text-green-400">
+            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+            Backend Online
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+};